1.0.1 • Public • Published

Vanilla JS Menu Scrollspy

Vanilla JS Menu Scrollspy is a script that tracks website scrolling and automatically marks and unmarks menu links of website sections according to the current scrolling position.


Inside the dist folder you will find four different bundles:

Filename Module Type
menu-scrollspy.amd.min.js AMD (Asynchronous Module Definition)
menu-scrollspy.esm.min.js ES Module (ES6 Module)
menu-scrollspy.iife.min.js IIFE (Immediately Invoked Function Expression)
menu-scrollspy.min.js UMD (Universal Module Definition)


Via CDN:

<script src=""></script>

Via Downloading / Self-Hosting:

<script src="/js/menu-scrollspy.min.js"></script>

Via npm:

npm i vanilla-js-menu-scrollspy --save-dev
import MenuScrollspy from 'vanilla-js-menu-scrollspy';


Include the script via CDN, downloading / self-hosting or install the package via npm and import the script as module.

Invoke the script after the DOM has been fully loaded ...

... with Vanilla JavaScript:

window.addEventListener('load', (event) => {
    const menuScrollspy = new MenuScrollspy();
}, {passive: true});

... with jQuery:

$(document).ready(function () {
    const menuScrollspy = new MenuScrollspy();

Add some styling with SCSS:

$accent: #64b5f6;

.menu-item {
  transition: color 0.25s ease-in-out;

  &.active {
    color: $accent;

  // also add styling for included icons / SVGs

Set custom config / options when needed.

API / Config / Options

You can pass an object with the following config / options to the new MenuScrollspy(); constructor to change the default behaviour of the script:

const menuScrollspy = new MenuScrollspy({
    // config / options
Name Meaning Default Value Example value(s)
classActive The class applied to the active menu link. 'active' 'class‑name'
classMenuItem The class by which menu items are identified. 'menu‑item' 'class‑name'
classSelector The class by which website sections are registered. 'js‑menu‑scrollspy' 'class‑name'
customEvents Events that should re-init the script (resize is already provided). [] ['hyphenopoly‑done', 'lazyloading‑done']
enterViewportThreshold The viewport line which website sections need to enter or leave to mark and unmark menu links. 'middle' 'top'|'middle'|'bottom'
fixedMenuSelector Valid selector for document.querySelector() to get the height of a fixed menu and use it in the viewport threshold calculation. null '#nav'
reInitOnScroll If scrolling should re-init the script (for example lazy loading content like images without placeholders changing the website height). false true|false
updateUrlFragmentOnScroll If scrolling should update the URL fragment (and the browser history). true true|false


Check out the Vanilla JS Menu Scrollspy script in action.


The Vanilla JS Menu Scrollspy package is open-sourced software licensed under the MIT license.


npm i vanilla-js-menu-scrollspy

DownloadsWeekly Downloads






Unpacked Size

36.1 kB

Total Files


Last publish


  • ldommer