A sticky .menu tracks scroll position with an
IntersectionObserver and toggles .active on the matching
.menu-item. No new CSS at all.
Scrollspy watches a set of sections and highlights the nav link for
whichever one is currently in view. It's the pattern used in most documentation
sites — this one sits on top of components you already have: .menu,
.menu-item, and the .menu-item.active state.
Nothing to install beyond cssvars.css. Drop the scrollspy
script (bottom of this page) in before </body>. No build step,
no dependency — same philosophy as the rest of the framework.
Add data-scrollspy to a .menu whose
.menu-item a links point to section IDs on the page
(href="#section-id"). The script finds the matching sections
automatically — no extra markup on the sections themselves.
The observer's rootMargin controls when a section
"counts" as active (default triggers a bit before it hits the top of the
viewport, so the highlight feels responsive rather than late). This is a single
constant at the top of the script.
The active link also gets aria-current="location" in
addition to the .active class, so the current section is announced
to assistive tech, not just shown visually.
Built with love in by Kim Majali, EITO team, and contributors.