Easy Pure JavaScript Scrollspy Library For Static Webpages – scrollspy.js

Preview:

Description:

A lightweight and easy-to-use JavaScript scrollspy plugin that automatically adds or removes the active class from nav links depending on the section you’re viewing on.

Ideal for one-page scroll website that highlights the active item in the navbar when scrolling down or up.

How to use it:

1. Install the scrollspy.js with NPM.

# NPM
$ npm i @sidsbrmnn/scrollspy --save

2. Import the scrollspy as an ES module.

import scrollSpy from '@sidsbrmnn/scrollspy'

3. Or load the scrollspy.min.js in the document.

<script src="/path/to/dist/scrollspy.min.js"></script>

4. Create anchor links pointing to the sections within the document.

<nav>
  <a href="#first">First Section</a>
  <a href="#second">Second Section</a>
  <a href="#last">Last Section</a>
</nav>
<section id="first">
  Section 1
</section>
<section id="first">
  Section 1
</section>
<section id="first">
  Section 1
</section>

5. Initialize the scrollspy and done.

scrollSpy('nav', {
  // options here
});

6. Apply CSS styles to the active menu item.

.active {
  /* CSS styles here */
}

7. Apply a smooth scroll effect to the menu items.

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

8. All default options.

scrollSpy('nav', {
  sectionSelector: 'section',
  targetSelector: 'a',
  offset: 0, // in pixels
  hrefAttribute: 'href',
  activeClass: 'active',
});

9. Perform an action on active.

scrollSpy('nav', {
  onActive: function(menuItem, section) {}
});

Changelog:

v1.1.0 (01/06/2022)

• Added onActive callback function