@contentpilot/sticky-navigation/README.md

Add identifiers and activate the anchors that have these identifier and are intercepted with the scroll.

# Content Pilot Sticky Navigation

Scroll the page and note how the marker animates to highlight all of the sections that are currently on screen.

### Installation

`npm install @contentpilot/sticky-navigation --save-dev`

### Require JS file in task runner

`./node_modules/@contentpilot/sticky-navigation/index.js`

### Import and initialize

`const sticky = require('@contentpilot/sticky-navigation');`

The options parameter is optional.

`sticky.init(options);`

### Options

#### clause: String

Clause element selector. The script will not run if this element does not exist. Default is `.sticky-navigation`. Use syntax of `querySelector`

```
const options = {
	clause: ''
};
```

#### identifiers: String

Selector of elements to which the ID attribute will be added. Default is `h2, h3, h4, h5, h6`. Use syntax of `querySelectorAll`

```
const options = {
	identifiers: ''
};
```

#### interceptors: String

Selector of elements that when intercepted will add the active class in the anchors that have that destination. Default is `h2[id], h3[id], h4[id], h5[id], h6[id]`. Use syntax of `querySelectorAll`

```
const options = {
	interceptors: ''
};
```

#### offsetAnchor: Number

Offset distance when scrolling. Useful when using a fixed header. Default is `0`. Ignored if offsetElement was defined.

```
const options = {
	offset: 0
};
```

#### offsetElement: String

Element selector to calculate offset dynamically. Useful when the offset varies according to an element that is not always present. Default is `empty`.

```
const options = {
	offsetElement: ''
};
```

#### inactiveUpperZone: Number

Distance in pixels from the top where items are not activated. Useful when you have a fixed header, you scrolls up and you don't want to activate the element while it is behind the header. Default is `0`.

```
const options = {
	inactiveUpperZone: 170
};
```

#### interceptionPercentage: Number

Distance in percentage from the top for the items to activate. If for example you want the items to activate when they are in the middle of the screen, use 50. Default is `20`.

```
const options = {
	interceptionPercentage: 50
};
```

### Publish to NPM

To update this repository on NPM using the GitHub action,

1. Bump the version number in `package.json`
2. Follow the pattern on your commit message `Release x.x.x`
3. Push to `main` branch to `origin`