StickyState adds state to position:sticky elements and also polyfills the missing native sticky feature.
Today's browsers do not all support the position:sticky feature (which by the way is being used (polyfilled) on pretty much every site you visit) - moreover the native supported feature itself comes without a readable state. Something like
Unlike almost all polyfills you can find in the wild, StickyState is highly performant. The calculations are reduced to a minimum by persisting several attributes.
In some cases you also need to know in which direction the user scrolls - for example if you want to hide a sticky header when the user scrolls up. if you set the scrollClass property of the options StickyState will add your choosen classNames to the element when it is sticky and scrolling.
As a standalone Library its 6.75kb gzipped.
IE >= 9, *
npm install sticky-state
all you can eat
Your css should contain the following lines: (you can specify the classNames in js) https://github.com/soenkekluth/sticky-state/blob/master/dist/sticky-state.css
var StickyState = ;document;// all elements with class .sticky will have sticky state:
var StickyState = ;// the props you can set (except scrollClass this shows the default options):var stickyOptions =disabled: falseclassName: 'sticky'stateClassName: 'is-sticky'fixedClass: 'sticky-fixed'wrapperClass: 'sticky-wrap'absoluteClass: 'is-absolute'// do only set the following option if you really need a class for the scroll direction on the element. else this could be heavy unnassesary dom manipulationscrollClass:down: 'sticky-scroll-down'up: 'sticky-scroll-up';// instantiate with optionsvar stickyElements = document stickyOptions;
api / events
var StickyState = ;document;