Navigation highlights should change as the user scrolls through sections on the page (e.g., table of contents, docs sidebar). Manually checking scroll positions against section offsets is inefficient and error‑prone.
ScrollSpy uses IntersectionObserver to detect which section is currently most visible in the viewport. It triggers
a callback with the active section’s ID/element, allowing you to update the UI accordingly. The demo below demonstrates a sticky navigation
that highlights the active section while scrolling.
TableOfContents, OnPageNavigation, DocsSidebar, BlogPostIndex, LandingPageNav
Scroll down to see the navigation highlight change. This section is the introduction. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
More content to make scrolling noticeable...
Here we describe all the amazing features. When this section becomes most visible in the viewport, the "Features" link in the navigation gets highlighted.
Our pricing plans are affordable and flexible. The navigation will highlight "Pricing" as you scroll to this area.
Reach out to us via the contact form. The "Contact" link lights up when this section is active.