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.
The Best Scrollspy Plugin
Table of contents:
Best jQuery Scrollspy Plugins
navbar-fixed.js is a very small jQuery plugin used to extend the default fixed Bootstrap navbar component with scrollspy and smooth scroll support.
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.
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.
A jQuery plugin which dynamically generates a nested side navigation (TOC) from heading tags within the document, with support for scrollspy functionality.
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.
Best vanilla JS Scrollspy Plugins
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.