Turn your article headings into a sticky sidebar that highlights the section you are reading. Indented lines become sub-sections, and on phones the table collapses into a tap-to-open box.
Runs entirely in your browser. Nothing is uploaded to any server.
Readers jump straight to the section they need.
Scroll-spy highlights the section on screen.
Docs, guides and blog posts feel shorter and clearer.
The sidebar uses position: sticky inside a two-column grid, so it scrolls with the page until it reaches the top offset and then stays put. If the list is taller than the screen, it scrolls on its own.
On every scroll frame the script finds the last heading that has passed the top offset and marks its link with aria-current="true", which also drives the highlight style. At the very bottom of the page the last section is always selected, even if its heading never reaches the top.
scroll-margin-top keeps headings visible below sticky headers.
Below the breakpoint the TOC becomes a collapsible box above the article.
A thin bar at the top shows how far through the page you are.
position: sticky stops working when a parent has overflow hidden or auto. Check the containers above the layout.
Yes. Keep the aside and the script, give each heading in your article an id, and point the links at those ids.
Increase the sticky top offset to the height of your header. The script and scroll-margin-top use the same value.
The links, smooth scrolling and sticky sidebar work with CSS only. Only the highlight and the progress bar need the script.
This generator supports two levels, which covers h2 and h3 headings in most articles.
More free tools from My Panda Toolbox.