Heads-Up.js is a javascript sticky headers that hide on scroll.

Core Java Script



headsup.js on NPM headsup.js Downloads on NPM Standard JavaScript Style

Sticky headers that hide on scroll.

See a demo.


Follow these steps to get started:

  1. Install
  2. Import
  3. Review Options

Note: It is required that you use a css reset that clears user agent stylesheet margin/padding. See here for an example.


Using NPM, install Heads-up, and save it to your package.json dependencies.

$ npm install headsup.js --save


Import Heads-up, naming it according to your preference.

import headsUp from 'headsup.js'


All options are optional, and come with defaults. The defaults are shown below:

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

Explanation of each option follows:


Any CSS selector that targets to your header element. It is recommended that you use the default semantic HTML tag.

headsUp({   target: '#header' })


The time it takes for the header to hide, in seconds.

headsUp({   duration: 0.5 })


Easing function used to transition the header.

headsUp({   easing: 'ease-in' })

Heads-up uses the transition property to accomplish easing. See MDN for more information.


Delay from the time the user starts scrolling until the header starts to hide, in seconds.

headsUp({   delay: 1 })


When the user scrolls, a function is called to check whether it is necessary to hide or reveal the header. Specify the amount of time between function calls with the debounce option, in milliseconds. This may help with performance.

// will wait 100ms after each function call  headsUp({   debounce: 100 })

Browser Support

Heads-up depends on the following browser APIs:

Consequently, it supports the following natively:

  • Chrome 1+
  • Firefox 3.5+
  • Safari 3.2+
  • Opera 10+
  • IE 9+
  • iOS Safari 4+
  • Android Browser 2+


MIT. © 2018 Christopher Cavalea

You May Also Like