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 'sticky-menu';

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,
  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

| Option name | Type | Default | Description | Required | |---|---|---|---|---| | breakpoint | Number | 0 (in px) | Stickymenu is only initialized if window width is above or equal to breakpoint. | false | | contentElement | HTMLElement || Element to apply offset (in px) on.Note: a (sticky) element with position: fixed usually causes 'jumping' content due to its missing height.To prevent that, just use the contentElementOffset option by adding offset to the to the next following element after your menu element. Will only be applied if option is set. | false | | contentElementOffset | Number | 0 (in px) | Sets content element offset. | false | | menuElement | HTMLElement | | The target element to apply sticky mode on. | true | | menuClass | String | stickymenu | A css class which is added to target element when in sticky mode.Note: the active class is generated automatically. yourClassName results in yourclassname-active. | false | | scrollPosY | Number | 0 (in px) | Controls at which scroll position the stickymenu takes effect. | false | | resizeEventTimeout | Number | 50 (in ms) | Final event execution in resize handler is delayed to prevent being fired on every px while resizing.This sets timeout in ms after which the final resize event fires. | false | | scrollEventTimeout | Number | 50 (in ms) | Final event execution in scroll handler is delayed to prevent being fired on every px while scrolling.This sets timeout in ms after which the final scroll event fires. | false |