10 Best Scrollspy Plugins In JavaScript (2026 Update)
Suppose you have a long web page or single page web app, you might need a scrollspy plugin to track the scroll position and indicate which content section your visitors are viewing on.
What Is Scrollspy?
Scrollspy is a technique widely used in modern web design that keeps track of scroll events in a scrollable container or the whole document and triggers certain functions on specified elements based on the scroll position.
A typical use of scrollspy is to automatically update items in header navigation or table of contents based on the scroll position you visitors scroll to.
The Best Scrollspy Plugin
To provide a better one page scroll experience on your long webpage, you shouldn't miss the 10 best jQuery and Vanilla JavaScript scrollspy plugins that can be used to keep track of what elements currently are on the screen. Enjoy.
Originally Published Aug 27 2020, updated Feb 14 2026
Table of contents:
Best jQuery Scrollspy Plugins
Sticky Header + Smooth Scroll + Scrollspy = Stoocky Page
A versatile jQuery plugin helps you create easy-to-navigate landing pages, portfolio websites, and single page web applications.
Features:
- Sticky Header Nav: Ensures the header or navigation bar remains visible while scrolling.
- Smooth Scroll: Enables smooth and animated scrolling to specific content sections when users click on menu items.
- Scrollspy: Automatically highlights menu items based on the user's scroll position, offering a clear indication of the current section being viewed.
Highlight Active Menu Item Based On Scroll Position - ScrollSpy
A super tiny (less than 1kb) jQuery scrollspy plugin to highlight active menu items in the navigation based on the scroll position of the corresponding content within a container or the whole document.
One Page Scroll Site Navigation Plugin With jQuery
A jQuery plugin for creating a sticky site navigation for one page scrolling website or single page web app.
It keeps track of page scroll events and applies custom styles to Active nav items, which we've called Scrollspy.
Easy Scrollspy Navigation In jQuery - scrollspy.js
An easy yet fully customizable jQuery scrollspy navigation plugin that highlights active links of your site navigation as the user scrolls to the corresponding section.
jQuery Plugin To Spy Scrolling Events - ScrollWatch
A robust and customizable jQuery scrollspy plugin that determines active page sections you're looking at and highlights the corresponding nav links on vertical page scrolling.
Best vanilla JS Scrollspy Plugins
Highlight Active Menu Based On The Scroll Position – active-menu-link
A pure JavaScript smooth scroll & scrollspy library which highlights the active menu item based on the scroll position.
Scrollspy & Smooth Scroll Library – scrollspy.js
A lightweight pure JavaScript scrollspy library that enables the navigation links to smoothly scroll between page sections with scrollspy support.
Update Navigation Items Based On Scroll Position – ScrollSpy.js
A small pure JavaScript scrollspy library that automatically highlights navigation items based upon scroll position to indicate which content section is currently active in the viewport.
Sticky Navigation With ScrollSpy Using Intersection Observer API
A sticky on-page navigation (a.k.a table of contents) that automatically highlights the active menu items based on the visibility of their corresponding content sections within the document.
Tiny JavaScript ScrollSpy Library for Smart Navigation Highlighting
This is a dependency-free scrollspy library that automatically highlights navigation links in your TOC (table of contents) based on scroll position.
The library watches where the user is on the page and applies a CSS class to the corresponding link in your navigation menu. This gives users a clear visual cue of their location within the content.
Features:
- Intelligent section detection: Automatically determines active sections based on viewport position.
- Nested navigation support: Handles hierarchical table of contents structures with parent-child relationships.
- Dynamic content compatibility: Works with both static content and dynamically updated DOM elements.
- Fixed header compensation: Configurable scroll offset to account for sticky navigation bars.
- DOM mutation observer: Optional automatic refresh when content changes.
- Custom event emission: Fires activation and deactivation events for integration with other components.
- Clean lifecycle management: Simple setup and destroy methods for proper resource cleanup.
More Resources:
Looking for more jQuery plugins or JavaScript libraries to implement the Scrollspy functionality on the web & mobile? See jQuery Scrollspy and JavaScript Scrollspy for more details.
See Also:
- Best One Page Scroll JavaScript Libraries
- Best Smooth Scroll Plugins
- 10 Best Sticky Header Navigation Systems In JavaScript
- 10 Best Table Of Contents JavaScript Plugins
