Sticky JavaScript In-page Navigation Plugin – Navigator.js

Preview:

Description:

Navigator.js is a JavaScript scrollspy plugin used to create a sticky page navigation that highlights the current menu item when you scroll past its content section.

How to use it:

Include the Navigator.bundle.js JavaScript library at the bottom of the webpage.

<script src="Navigator.bundle.js"></script>

Assumed that you have several content sections in the webpage as follows:

<h2 id="introduction" class="page-link">Introduction</h2>
...
<h2 id="Installation" class="page-link">Installation</h2>
...
<h2 id="example" class="page-link">Example</h2>
...

Create the in-page navigation:

<div class="links">
  <ul>
    <li class="list__item"><a class="stickyLink" href="#introduction">Introduction</a></li>
    <li class="list__item"><a class="stickyLink" href="#Installation">Installation</a></li>
    <li class="list__item"><a class="stickyLink" href="#example">Example</a></li>
  </ul>
</div>

Initialize the plugin and done.

var exampleNav = new Navigator({
    activeClass: 'active',
    activeElement: '.list__item',
    defaultIndex: 1,
    offset: 0,
    pageLinkSelector: '.page-link',
    throttle: 75,
    updateState: true,
    debug: true
});

Default configuration options.

// Class name applied to the current active element.
activeClass: 'active',
// Any valid HTML Selector, .foo, #bar, *[data-active]. 
// The active element by default will be anchor link with corrorsponding href attribute, if activeClass is set to false.
activeElement: false,
// The default active item, this is not zero indexed (defaultIndex: 1 = first item)
// If set to false, first active item will activate once scrolled into view.
defaultIndex: 1,
// Active item offset, this is the amount in pixels an item will activate before it reaches the top of the viewport. Margin & padding are currently included by default.
offset: 0,
// Page link selector, this accepts any valid HTML selector to identify which links should be considered part of the Navigator menu.
pageLinkSelector: '.page-link',
debounce: 100,
// Amount in milliseconds the window scroll event is throttled. 
// The default will update the Navigator's state every 75ms consecutive scroll events are fired. 
// Increasing this amount will improve performance but affect Navigator's accuracy responding to scroll events.
throttle: 75,
useHistory: true,
debug: false,
// Fired once the active item has changed, the active item HTMLElement is available as an argument.
callbacks: {
  onActiveItem: null
}