sticky-menu v1.2.5

sticky-menu

sticky-menu is a light-weight plugin to easily create a sticky navigation which can be customized for your needs. It's written in vanilla javascript and comes without any further dependencies.

Installation

npm install sticky-menu

Usage

First, make sure to import dependency:

import StickyMenu from 'stickymenu';

Import basic css:

@import '~/stickymenu/css/style.css'; /* you may check if you need the tilde (~) alias for /node_modules folder. */

Setup

Setup requires an element HTMLElement. Options are passed as Object.

const sticky = new StickyMenu(options);

Requires an html element selector (classname, id, data-attribute, …). Options are passed as Object.

Basically you need:

const options = {
  // place options here
};
const stickyMenu = new StickyMenu(options); // fires init

Example with options:

const menuElementSelector = document.querySelector('.myNavElement');
const stickyMenu = new StickyMenu({
  menuElement: menuElementSelector,
  options: {
    contentElement: document.querySelector('main'), 
    contentElementOffset: 100,  // content offset (in px)
    startStickyAtPos: 30,       // sticky menu starts if scrollTop is >= 30px
    resizeEventTimeout: 100,    // timeout after which the resize event fires (in ms)
    scrollEventTimeout 100,     // timeout after scroll the scroll event fires (in ms). 
});

stickyMenu.init(); // call init() to fire plugin

Options