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.