@apatheticwes/stickynav

Sticky Nav

A package of "Sticky Navigation" utilities

Introduction

A collection of 3 mini-utilities: a "sticky" Class to affix elements to the top of the viewport when scrolled, a function to smoothly scroll the page to any anchor, and a Class that auto-generates an in-page navigation from data-attribues in the DOM.

Scroll and Sticky may be used individually, but when used in tandem via StickyNav the result is an automatically created navigation menu that sticks to the top of the viewport, with nav-items that smoothly scroll to corresponding anchors in the page.

Installation

If you're oldskool, you can download the pre-built version to quickly mess around. Otherwise:

npm i @apatheticwes/stickynav -D

ES6

import { Sticky, Scroll, StickyNav } from 'stickynav';

CommonJS

var sticky = require('stickynav').Sticky;
var stickynav = require('stickynav').StickyNav;
var scroll = require('stickynav').Scroll;

Recipes

Create an auto-generated sticky navigation from in-page DOM elements:

<!-- this will become a sticky navigation, populated with nav items that initiate smooth scrolling when clicked -->
<ul id="sticky"></ul> 

...

<main>
  <section data-nav="Introduction">
  <section data-nav="Overview">
  <section data-nav="Summary">
</main>

new stickyNav({
  nav: '#sticky'
});

Or, just create a sticky element. This one is bounded by its parent (meaning it will unstick along with the bottom edge of its parent), and will become sticky 80px from the top of the viewport:

new Sticky('#sticky', {
  boundedBy: true,
  offset: 80
}

Smoothly scroll to a particular page section or anchor:

const intro = document.querySelector('#intro');

scrollPage(intro);

Options

Sticky

name	type	default	description
element	HTMLElement		The element to sticky-ify (required).
option.boundedBy	boolean, HTMLElement		"true" to use the parent node, or a custom bounding element for the sticky element. This affects where / when the sticky will attach and detach
option.offset	number	0	An offset from the top at which to toggle "stickiness"

Scroll

name	type	default	description
to	HTMLElement		The DOM node to scroll to (required)
offset	number	0	A scrolling offset
callback	function		Callback function when scrolling is complete

StickyNav

name	type	default	description
option.nav	HTMLElement		The DOM node to generate the nav into (required)
option.sections	string, HTMLElement	data-nav	A querySelector, or the elements themselves, to be used when generating the menu items in the navigation
option.boundedBy	boolean, HTMLElement	false	"true" to use the parent node, or a custom bounding element for the sticky element. This affects where / when the sticky will attach and detach
option.offset	number	0	The scroll / sticky offset

Examples

There is a demo is available. Alternatively, after cloning the repo, try:

npm i
npm start

A server will spin up at http://localhost:8080, where you may play with the various examples.

Support

• IE8+
• Safari / Chrome
• Firefox
• iOS
• Android

License

MIT