Sticky Navigation That Hides On Scroll Down – Heads-Up

Category: Javascript , Menu & Navigation | October 6, 2018
Author:ChrisCavs
Views Total:127 views
Official Page:Go to website
Last Update:October 6, 2018
License:MIT

Preview:

Sticky Navigation That Hides On Scroll Down – Heads-Up

Description:

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
})

You Might Be Interested In:


Leave a Reply