Website
Sticky Table of Contents in Framer
This is a demo website in Framer that showcases the structure you need if you want to add a sticky table of contents to your blog posts. Feel free to remix the project and dig into it to see how it's built, or watch the mini tutorial.
Created by
About the Resource
In this demo, I'm using sticky positioning to keep the table of contents in view as you scroll down the page. To achieve that, we need to make sure that the sticky positioned frame's parent containers are all set to overflow visible.
To ensure that the table of contents is optimized for mobile and tablet, we need to create a separate frame for the mobile version of the table of contents and show or hide the version on each breakpoint as needed.
About the Resource
In this demo, I'm using sticky positioning to keep the table of contents in view as you scroll down the page. To achieve that, we need to make sure that the sticky positioned frame's parent containers are all set to overflow visible.
To ensure that the table of contents is optimized for mobile and tablet, we need to create a separate frame for the mobile version of the table of contents and show or hide the version on each breakpoint as needed.
About the Resource
In this demo, I'm using sticky positioning to keep the table of contents in view as you scroll down the page. To achieve that, we need to make sure that the sticky positioned frame's parent containers are all set to overflow visible.
To ensure that the table of contents is optimized for mobile and tablet, we need to create a separate frame for the mobile version of the table of contents and show or hide the version on each breakpoint as needed.
Sticky table of contents layers structure.
Sticky table of contents layers structure.
Sticky table of contents layers structure.
As you can see in the image above, the "Mobile ToC" is hidden on the desktop breakpoint, and the regular "Table of Contents" is visible.
As you can see in the image above, the "Mobile ToC" is hidden on the desktop breakpoint, and the regular "Table of Contents" is visible.
As you can see in the image above, the "Mobile ToC" is hidden on the desktop breakpoint, and the regular "Table of Contents" is visible.
