Sticky Navigation That Hides On Scroll Down – Heads-Up

The Heads-Up library helps you create a smart sticky navigation that hides on scroll down and reappears on scroll up.

How to use it:

Install the Heads-Up via NPM.

$ npm install headsup.js --save

Import the Heads-Up.

import headsUp from 'headsup.js'

Create a header navigation on the webpage.

<header>
  Your Navigation Here
</header>

Initialize the Heads-Up on the header navigation. Done.

headsUp({
  selector: 'header'
})

Customize the behavior of the sticky navigation.

headsUp({
  selector: 'header',
  duration: 0.3, // in seconds
  easing: 'ease',
  delay: 0,
  debounce: false // in ms
})