One of the most useful applications of a scroll spy is long-form legal or documentation pages.
For example:
Privacy statements
Terms & conditions
Documentation portals
Knowledge bases
API docs
These pages often contain multiple sections, and users can easily lose track of where they are while scrolling.
A scroll spy solves this problem by automatically updating the active sidebar item as the user moves through the page.
In this implementation, the sidebar navigation always stays synchronized with the visible content section.
The User Experience Goal
The idea is simple:
Clicking a sidebar item smoothly scrolls to the correct section
The active menu item updates automatically while scrolling
The sidebar remains visually synchronized with the content
Sticky navigation keeps the menu visible at all times
This creates a much cleaner and more professional reading experience.
Detecting the Active Section
The core logic relies on getBoundingClientRect().
This method calculates the position of each section relative to the viewport.
const trigger = navbarHeight + window.innerHeight * 0.3;
const rect = section.getBoundingClientRect();
if (rect.top <= trigger) {
active = section;
}window.innerHeight * 0.3 creates a trigger line positioned around 30% down the viewport.
Instead of looking to a section that fully reaches the top of the screen, the active state appears at eyes length, creating a nicer experience.
This makes the navigation feel much more natural while scrolling.
Detecting When Scrolling Ends
Modern browsers now support the scrollend event.
This event fires when scrolling has completely finished.
if ('onscrollend' in window) {
window.addEventListener(
'scrollend',
() => {
isScrolling = false;
},
{ once: true }
);
}This creates a smoother synchronization flow between:
manual scrolling
smooth scrolling
active link highlightingIf You’re Thinking About Starting
Final Thoughts
A well-designed scroll spy improves usability.
Small UI details like:
sticky navigation
smooth scrolling
active section highlighting
make long pages feel significantly easier to navigate.
Here are some excellent sources to read more about it, this was just an introduction.
- Smooth Scrolling Sticky ScrollSpy Navigation
- Scroll Event
- getBoundingClientRect
Do you have any feedback or suggestion? Don’t forget to visit our website and contact us, or send us a message on instagram, tiktok or linked in @fazael.co.