https://github.com/mikedevelops/navigator.js
A vanilla front end package to power in-page navigation
https://github.com/mikedevelops/navigator.js
Last synced: 4 months ago
JSON representation
A vanilla front end package to power in-page navigation
- Host: GitHub
- URL: https://github.com/mikedevelops/navigator.js
- Owner: mikedevelops
- Created: 2016-07-07T07:41:30.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-11-24T09:39:26.000Z (over 8 years ago)
- Last Synced: 2025-02-28T23:58:38.399Z (over 1 year ago)
- Language: HTML
- Homepage:
- Size: 88.9 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Navigator.js
*A vanilla front end package to power in-page navigation*
## Introduction
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.
## Installation
Install with NPM using the following command
```
npm install mikedevelops/navigator.js#v1.2.1 --save-dev
```
## Usage
This is an example initiation using some default and custom options, see **Options** for more information
```javascript
var exampleNav = new Navigator({
activeClass: 'active',
activeElement: 'list__item', // default: false
defaultIndex: false, // default: 1
offset: 0,
pageLinkSelector: '.page-link',
throttle: 75,
updateState: true
});
```
## Example
Example page coming soon...
## Options
```
activeElement: false (default)
```
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.
```
activeClass: 'active' (default)
```
Class name applied to the current active navigation 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.
## Callbacks
```
onActveItem: null (default)
```
A callback fired once the active item has changed, the active item `HTMLElement` is available as an argument.
```javascript
var exampleNav = new Navigator({
callbacks: {
onActiveItem: function (activeItem) {
// your code here...
}
}
}
```