Heads-Up.js

Sticky headers that hide on scroll.

See a demo.

Usage

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.

Install

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

$ npm install headsup.js --save

Import

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

import headsUp from 'headsup.js'

Options

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:

• selector
• duration
• easing
• delay
• debounce

selector

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

headsUp({
  target: '#header'
})

duration

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

headsUp({
  duration: 0.5
})

easing

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

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

headsUp({
  delay: 1
})

debounce

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:

• pageYOffset
• querySelector
• getBoundingClientRect

Consequently, it supports the following natively:

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

License

MIT. © 2018 Christopher Cavalea