ScrollSpy.js

Installation

Include CSS

First include the stylesheet in your HTML head (Optional):

<link rel="stylesheet" href="ScrollSpy.min.css">

Include JS

Now include the JavaScript in your HTML footer :

<script src="ScrollSpy.min.js"></script>

Setup

HTML Markup

Now let's create a HTML structure like below :

<div class="scrollspy" spy-title="Section Title">Content</div>
<div class="scrollspy" spy-title="Section Title">Content</div>
<div class="scrollspy" spy-title="Section Title">Content</div>
<div class="scrollspy" spy-title="Section Title">Content</div>
<div class="scrollspy" spy-title="Section Title">Content</div>
<div class="scrollspy" spy-title="Section Title">Content</div>

<div id="indicator"></div>

Initializing with JS

Then, let's initialize the library for our markup :

var spy = new ScrollSpy({
    contexts_class: 'scrollspy'
});

Initializing Options

Here is a full list of options that can be passed to library while initializing :

var spy = new ScrollSpy({
        contexts_class: 'scrollspy',
        delay: 200,
        callbackOnChange: function (el) { alert('Active Element Changed'); },
        callbackOnDestroy: function () { alert('ScrollSpy Distroyed !'); }
});

contexts_class class of the elements that need to be tracked by the library.

delay time of delay between detecting scrolls, by default it's 200ms.

callbackOnChange function that gets called each time when active element of the page changes.

callbackOnDestroy function that gets called after calling the destroy method.

Indicator options

Also here is a full list of options that can be passed to library while initializing an indicator :

spy.Indicator({
    element: document.getElementById('indicator'),
    indicator_container_class: 'scrollspy-indicator',
    indicator_item_class: 'scrollspy-indicator-item',
    clickable: true,
    forceActive: false,
});

element the element that will be used as indicator container.

indicator_container_class class of the indicator's container.

indicator_item_class class of the indicator's items.

clickable specifies whether the indicator's items will be clickable, check this demo.

forceActive specifies whether the indicator must have an active element, check this demo.

Download

You can download the latest release of library from this github repository.