Author: | mikedevelops |
---|---|
Views Total: | 843 views |
Official Page: | Go to website |
Last Update: | July 20, 2016 |
License: | MIT |
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 }