10 Best Scrollspy Plugins In JavaScript (2024 Update)

by jQueryScript,

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 06 2024

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.

Highlight Active Menu Item Based On Scroll Position - ScrollSpy

[Demo] [Download]


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.

One Page Scroll Site Navigation Plugin With jQuery

[Demo] [Download]


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.

Sticky Header + Smooth Scroll + Scrollspy = Stoocky Page

[Demo] [Download]


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.

jQuery/CSS Sticky Header Navigation With Scrollspy Functionality

[Demo] [Download]


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.

Easy Scrollspy Navigation In jQuery - scrollspy.js

[Demo] [Download]


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.

Highlight Active Menu Based On The Scroll Position – active-menu-link

[Demo] [Download]


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.

Scrollspy & Smooth Scroll Library – scrollspy.js

[Demo] [Download]


Highlight Active Menu Item On Page Scroll – MenuSpy.js

A multi-purpose JavaScript library for your one page scrolling website that highlights the menu item relative to the currently visible section.

Highlight Active Menu Item On Page Scroll – MenuSpy.js

[Demo] [Download]


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.

Update Navigation Items Based On Scroll Position – ScrollSpy.js

[Demo] [Download]


Simple ScrollSpy Plugin With Pure JavaScript

A simple, lightweight JavaScript library that applies the Scrollspy functionality to one-page scrolling website.

Simple ScrollSpy Plugin With Pure JavaScript

[Demo] [Download]


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: