Small Scrollspy Script In Vanilla JavaScript – gumshoe

Category: Javascript , Recommended | April 27, 2019
Author: cferdinandi
Views Total: 738
Official Page: Go to website
Last Update: April 27, 2019
License: MIT

Preview:

Small Scrollspy Script In Vanilla JavaScript – gumshoe

Description:

gumshoe is a lightweight (3kb minified) JavaScript scrollspy library that automatically highlights nav links to indicate the currently active section in the viewport.

How to use it:

Install & import the gumshoe.

# NPM
$ npm install gumshoejs --save

Load the gumshoe library from a CDN.

<!-- With polyfills -->
<script src="/path/to/dist/gumshoe.polyfills.min.js"></script>

<!-- Without polyfills -->
<script src="/path/to/dist/gumshoe.polyfills.min.js"></script>

Attach the gumshoe to your navigation links.

<ul id="site-nav">
  <li><a href="#1">Section 1</a></li>
  <li><a href="#2">Section 2</a></li>
  <li><a href="#3">Section 3</a></li>
</ul>

<section id="1">
  Section 1
</section>

<section id="2">
  Section 2
</section>

<section id="3">
  Section 3
</section>
const instance = new Gumshoe('#side-nav a');

Apply your own styles to the active links.

#site-nav a.active {
  /* styles here */
}

The library also supports nested navigation links.

const instance = new Gumshoe('#side-nav a',{
      nested: true,
      nestedClass: 'active'
});

Set the distance from the top the library highlights the active nav links.

const instance = new Gumshoe('#side-nav a',{
      offset: 0
});

More configuration options.

const instance = new Gumshoe('#side-nav a',{

      // Active classes
      navClass: 'active', 
      contentClass: 'active',

      // If true, listen for reflows
      reflow: false, 

      // Event support
      events: true

});

Event handlers.

document.addEventListener('gumshoeActivate', function (event) {

  // event.target;

  // event.detail.link;

  // event.detail.content;

}, false);

document.addEventListener('gumshoeDeactivate', function (event) {

  // event.target;

  // event.detail.link;

  // event.detail.content;

}, false);

Changelog:

04/27/2019

  • Fixed destroy function

You Might Be Interested In:


Leave a Reply