Simple ScrollSpy Plugin With Pure JavaScript

Preview:

Description:

A simple, lightweight JavaScript library that applies the Scrollspy functionality to one-page scrolling website.

The plugin automatically adds the CSS class ‘active’ to the navigation item when the page is scrolled to its corresponding section.

How to use it:

Install the library.

# Yarn
$ yarn add simple-scrollspy
# NPM
$ npm install simple-scrollspy --save

Or download the zip and then insert the JavaScript file ‘simple-scrollspy.js’ into the document.

<script src="simple-scrollspy.js"></script>

Create a regular navigation menu and specify the target page sections using the ‘data-scrollspy’ attribute as follows:

<section class="scrollspy" id="home">
  <nav class="navigation">
    <ul id="menu" class="menu">
      <li class="menu__item">
          <a href="#home" class="active" data-scrollspy="#home">Home</a>
      </li>
      <li class="menu__item">
          <a href="#contact" data-scrollspy="#contact">Contact</a>
      </li>
      <li class="menu__item">
          <a href="#about" data-scrollspy="#about">About</a>
      </li>
    </ul>
  </nav>
</section>
<section class="scrollspy" id="contact">
  Contact Setion
</section>
<section class="scrollspy" id="about">
  About Setion
</section>

Active the scrollspy plugin with default options.

window.onload = function () {
  scrollSpy('#menu')
}

All possible options to customize the scrollspy functionality.

window.onload = function () {
  scrollSpy('#menu', {
    offset: 0, // in pixels
    menuActiveTarget: 'li > a',
    sectionClass: '.scrollspy',
    activeClass: 'active',
    scrollContainer: ''
  })
}

Customize the styles when a menu item is active.

.menu__item a.active {
  color: #ff7600;
  font-weight: bolder;
}

Changelog:

v2.3.6 (02/23/2023)

• Support CDN.js by adding dist/simple-scrollspy.min.js to NPM package. CDN.js will auto-fetch dist/simple-scrollspy.min.js to CDN servers.

v2.3.4 (02/13/2023)

• Bugfixes

09/29/2020

• feat: adding some functionality for allowing user to define a scrollContainer

v2.0.3 (12/25/2019)

• fix potential security vulnerabilities issues

02/17/2019

• Fix: Error is thrown when menu item can not be found

02/16/2019

• Fix data-scrollspy issue and refactor code