Neural Prediction Model

    @contentpilot/sticky-navigation

    1.6.0 • Public • Published

    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 master branch to origin

    Install

    npm i @contentpilot/sticky-navigation

    DownloadsWeekly Downloads

    20

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    47.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • claytoncollie
    • fh_cp
    • greggc
    • dushakov92