10 Best Scrollspy Plugins In JavaScript

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 plugin to keeps track of what elements currently are on the screen. Enjoy.

Table of contents:

Best jQuery Scrollspy Plugins

jQuery Plugin For Fixed Bootstrap 4 Nav With Smooth Scroll - navbar-fixed.js

navbar-fixed.js is a very small jQuery plugin used to extend the default fixed Bootstrap navbar component with scrollspy and smooth scroll support.

jQuery Plugin For Fixed Bootstrap 4 Nav With Smooth Scroll - navbar-fixed.js

[Demo] [Download]


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.

Minimal Scrollspy And Smooth Scroll Plugin - jQuery Click-scroll

[Demo] [Download]


jQuery/CSS Sticky Header Navigation With Scrollspy Functionality

This is 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.

jQuery/CSS Sticky Header Navigation With Scrollspy Functionality

[Demo] [Download]


Dynamic jQuery Scrollspy Plugin For Bootstrap - Dynamicscrollspy.js

A jQuery plugin which dynamically generates a nested side navigation (TOC) from heading tags within the document, with support for scrollspy functionality.

Dynamic jQuery Scrollspy Plugin For Bootstrap - Dynamicscrollspy.js

[Demo] [Download]


Lightweight jQuery Sticky Navigation With Scrollspy - Stickymenu.js

Stickymenu.js is a lightweight and easy-to-use jQuery plugin for creating a sticky navigation menu that automatically updates links based on scroll position.

Lightweight jQuery Sticky Navigation With Scrollspy - Stickymenu.js

[Demo] [Download]


Best vanilla JS Scrollspy Plugins

Highlight Active Menu Item On Page Scroll – MenuSpy.js

MenuSpy.js is 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]


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]


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.

Sticky Navigation With ScrollSpy Using Intersection Observer API

[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]


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]


More Resources:

Want more jQuery plugins or JavaScript libraries to implement scrollspy functionality on the web & mobile? Check out the jQuery Scrollspy and JavaScript Scrollspy sections.