Sticky headers that hide on scroll.
Forked from ChrisCavs. Thanks Chris!
Unlike the ChrisCavs version, this fork does not apply the styles necessary to show and hide the header. Instead it adds a class to the body when the header is hidden, allowing you to provide your own styles.
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 this repo as a dependency, or reference the headsup.js script file.
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',
debounce: false,
hiddenHeaderClass = 'js-header-hidden'
})Explanation of each option follows:
Any CSS selector that targets to your header element.
headsUp({
target: '#header'
})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
})hiddenHeaderClass
Applies a class to the body element when the sticky header is hidden. This can be used to add special styles to other elements on the page.
// will add the class `is-hidden` to the body when the header is hidden
headsUp({
hiddenHeaderClass: 'is-hidden'
})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+
Copyright for portions of this project are held by Christopher Cavalea, 2018. All other copyright for this project are held by Cloud Four, 2019.
MIT. © 2019 Cloud Four