Setting Up

To start using the ScrollSpy.js, we have to include ScrollSpy.js file in the project and optionally ScrollSpy.css which includes some default markups for the indicator :

<link rel="stylesheet" href="ScrollSpy.min.css">
<script src="ScrollSpy.min.js"></script>

Then we need elements to be tracked with a Class like scrollspy :

<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>

Optionally we add another element for Indicator with an ID like scrollspy-indicator :

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

Finally, we're going to do the magic using JavaScript :

// Initializing the ScrollSpy to the elements with class of 'scrollspy'
var spy = new ScrollSpy({
    contexts_class: 'scrollspy'
});

// Initializing the Indicator inside the element with ID of 'scrollspy-indicator'
spy.Indicator({
    element: document.getElementById('scrollspy-indicator')
});

For more customization and controlling over the library, you can Read Documentations.