Heads-Up.js
Sticky headers that hide on scroll.
Usage
Follow these steps to get started:
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
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:
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