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

License

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