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.

Bundles

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)

Installation

Via CDN:

<script src="https://cdn.jsdelivr.net/npm/vanilla-js-menu-scrollspy@latest/dist/menu-scrollspy.min.js"></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';

Usage

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;

  &:hover,
  &.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

Demo

Check out the Vanilla JS Menu Scrollspy script in action.

License

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