Stikit

Stikit is a small plugin to helping with putting a sticky nav on a landing page which can anchor to sections

Installation

Use the npm to install Stikit.

npm install stikit

Usage

Stikit has a dependency on Waypoints so include this in your project before Stikit.

Follow the html structure below. Including the outer wrapping element.

    <div>
        <nav id="sticky-nav">
            <a href="#blue">Blue</a>
            <a href="#red">Red</a>
            <a href="#yellow">Yellow</a>
        </nav>
        <section id="blue">

        </section>
        <section id="red">
    
        </section>
        <section id="yellow">
    
        </section>
    </div>

import Stikit from 'stikit';

new Stikit({
     'element' : document.querySelector('#sticky-nav'),     
});

There are some other available options

const options {
    'element' : document.querySelector('#sticky-nav'), //Required.
    'wrapperWidth' : '1000px' 
    'buttonColor' : '#ffffff'
    'fontColor' : '#000000'
    'fontSize' : '16px'
}

For a working example just navigate to Stikit folder and run

npm intall

then

npm run start

This will spin up the development server where you can see the working example.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.