Navigator.js Example

Navigator is a light weight navigation plugin for in-page navigation links. Navigator maps element IDs provided in the plugin configuration to corrosponding anchor links.

Install with NPM using the following command

`npm install ...`

This is an example initiation using some default & custom options, see #options for more information


var exampleNav = new Navigator({
    activeClass: 'active',
    activeElement: 'list__item', // default: false
    defaultIndex: false, // default: 1
    offset: 0,
    pageLinkSelector: '.page-link',
    throttle: 75,
    updateState: true

Something here about requiring vs not requiring...

activeClass: false (default)

HTML Selector, e.g .foo, #bar, *[data-active]

Active element by default will be anchor link with corrorsponding href attribute.

activeClass: 'active' (default)

Class name applied to the current active element.

defaultIndex: 1 (default)

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.

offset: 0 (default)

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.

pageLinkSelector: '.page-selector' (default)

Page link selector, this accepts any valid HTML selector to identify which links should be considered part of the Navigator menu.

throttle: 75 (default)

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.

updateState: true (default)

When set to true, this will replace the current browser history state using the history API. This will append the current active item's href attribute to the page's URL, this makes for better sharing of Navigator links.

Suspendisse hendrerit leo arcu, nec gravida lorem ultricies at. Pellentesque ullamcorper sem sit amet leo hendrerit, et commodo augue placerat. Mauris tempus congue enim, id luctus tortor auctor et. Duis et nibh et erat ultrices pretium tempor at metus. Morbi quis blandit elit. Fusce a vestibulum purus. Donec consequat tempor dui, nec scelerisque orci venenatis et. Aenean blandit viverra magna quis rutrum. Integer leo nunc, condimentum non ligula non, dignissim sollicitudin eros. Nulla a tellus erat. Cras dui nibh, tempor in dapibus id, dictum quis dolor. Curabitur neque tellus, dictum non volutpat ut, euismod non sapien.