@verndale/scrollspy

A JavaScript scrollspy library

Usage

Installing using npm

npm i @verndale/scrollspy

HTML

<!-- Navigation -->
<ul>
  <li>
    <a href="#first-section">First Section</a>
  </li>
  <li>
    <a href="#second-section">Second Section</a>
  </li>
  <li>
    <a href="#third-section">Third Section</a>
  </li>
</ul>
<!-- Sections -->
<div id="first-section">
  <h2>First Section</h2>
</div>
<div id="second-section">
  <h2>Second Section</h2>
</div>
<div id="third-section">
  <h2>Third Section</h2>
</div>

CSS

a.current {
  font-weight: bold;
}

JavaScript

import ScrollSpy from "@verndale/scrollspy";

const links = document.querySelectorAll("a");

new ScrollSpy({
  // Available settings
  // navItems: nav items that are listening to the scroll
  // className: className that will be applied to the "current" nav item
  // topOffset: offset in pixels to compensate elements such as header in the calculation
  navItems: links
});

Demo

https://codesandbox.io/s/verndalescrollspy-demo-m35uj