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