Storm Sticky Header

Example

https://adammulgrew.github.io/storm-sticky-header

Usage

HTML

<div class="js-sticky-header"></div>

JS

npm i -S storm-sticky-header

either using es6 import

import StickyHeader from 'storm-sticky-header';

StickyHeader.init('.js-sticky-header');

asynchronous browser loading (use the .standalone version in the /dist folder) using the global name (Storm + capitalised package name)

import Load from 'storm-load';

Load('{{path}}/storm-sticky-header.standalone.js')
    .then(() => {
        StormStickyHeader.init('.js-sticky-header');
    });

Options

{
    className: 'is--sticky',
    threshold: {
        down: 200,
        up: 200
    },
    buffer: 10
}

Tests

npm run test

Browser support

This is module has both es6 and es5 distributions. The es6 version should be used in a workflow that transpiles.

The es5 version depends upon Object.assign, element.classList, and Promises so all evergreen browsers are supported out of the box, ie9+ is supported with polyfills. ie8+ will work with even more polyfills for Array functions and eventListeners.

Dependencies

None

License

MIT