In-Page JavaScript Sticky Navigation Plugin | Navigator.js

Navigator is a lightweight navigation component for page navigation links.

Navigator maps the identifiers of the elements provided in the plug-in configuration to the corresponding anchor links.

How to make use of it:

Include the JavaScript Navigator.bundle.js library at the bottom of the web page.

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

Suppose you have several content sections on a web page 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 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>

Configure the plugin.

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
}

Sticky JavaScript In-page Navigation Plugin, Navigator.js Plugin/Github


See Demo And Download

Official Website(mikedevelops): Click Here

This superior jQuery/javascript plugin is developed by mikedevelops. For extra Advanced Usage, please go to the official website.

Share