Scrollspy

Build Scrollspy (scroll-linked navigation) for this article: a labeled <nav> "On this page" rail of same-document fragment links kept beside the content with position: sticky, and an IntersectionObserver watching each section anchor target so exactly one link carries aria-current="location". Make the current-section indicator unmistakable — a high-contrast vertical accent bar plus a stronger label that move to the section in view — and use rootMargin to offset the activation zone by the sticky header height.

Debug my scrollspy / On-this-page navigation (IntersectionObserver, aria-current="location", fragment links). Rule out: the highlight changing too early or too late because rootMargin does not account for the sticky header height; two or more links marked current at once because the observer callback sets state per entry instead of picking one winner from all intersecting sections; the last section never becoming current because the page cannot scroll far enough to bring it into the activation zone (pad the end of the article or fall back to a bottom-of-scroll rule); nothing highlighting at all because the observer root is the viewport while the sections scroll inside an overflow container, or because observe() ran before the sections existed; the rail links given role="tab" and aria-selected instead of aria-current, which makes screen readers announce a tab widget that does not exist; clicking a link jumping correctly but the highlight snapping back because the scroll-triggered observer overrides the clicked section. The symptom: