Scrollspy nav
The table of contents that highlights your current section as you scroll through a long page.
See it
What it is
A scrollspy nav is a list of in-page anchor links that watches the document and marks the section currently in view. As a reader crosses from Installation into Configuration, the matching link becomes active. Bootstrap ships the pattern as Scrollspy, which helped make the name familiar in web UI, and the table of contents on MDN reference pages does the same job.
Reach for one on long documentation, settings, policy, and article pages where readers need both a map and a live 'you are here' marker. IntersectionObserver can watch section headings without running a scroll handler on every frame, while ordinary hash links preserve copyable destinations and no-script navigation.
Gotcha: several short sections can be visible at once, so 'currently in view' needs one deterministic rule. Account for the sticky header, prefer the last heading that crossed the reading line, and handle the final section even when it cannot reach the top. Do not steal focus or flood browser history merely because the active highlight changed.
Ask AI for it
Build a sticky scrollspy navigation from the page's h2 headings. Keep each item as a normal hash link, set 'scroll-margin-top: 96px' on sections, and use IntersectionObserver with rootMargin '-96px 0px -70% 0px' to track the heading nearest the reading line. Mark exactly one link active with aria-current='location', update the URL with history.replaceState() without moving focus, and explicitly select the final section near the document bottom. Use scrollIntoView({ behavior: 'smooth' }) on click, falling back to 'auto' under prefers-reduced-motion.