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
Originally Published Aug 27 2020, updated Mar 20 2023
Table of contents:
Best jQuery Scrollspy Plugins
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.
Minimal Scrollspy And Smooth Scroll Plugin - jQuery Click-scroll
The jQuery Click-scroll plugin lets you create a site navigation that enables the user to scroll through different page sections with smooth scroll and scrollspy functionalities.
jQuery/CSS Sticky Header Navigation With Scrollspy Functionality
A jQuery and CSS/CSS3 based header navigation that will be fixed on the top of the page and auto highlight the current menu item when you scroll past its content section. Also provides a functionality to smoothly scroll the webpage to target content sections by clicking on the navigation menu. Fully responsive powered by CSS3 flexbox model.
Sticky Navigation With Smooth Scroll And Scroll Spy - jQuery sticky-nav
A multi-purpose jQuery site navigation plugin to create a sticky navigation with smooth scroll and scroll spy functionalities for your single page web application.
Navigation ScrollSpy & Smooth Scroll Plugin - nav-scroll-spy.js
A small yet useful jQuery scrollspy and smooth scroll plugin for site navigation that allows you to highlight the active item in the menu and smoothly scroll through the webpage.
Best vanilla JS Scrollspy Plugins
Highlight Active Menu Item On Page Scroll – MenuSpy.js
Highlight Active Menu Based On The Scroll Position – active-menu-link
Sticky Navigation With ScrollSpy Using Intersection Observer API
This is 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.
Update Navigation Items Based On Scroll Position – ScrollSpy.js
- Best Smooth Scroll Plugins