Stickyfill did a good job while the browsers were implementingposition: stickysupport. You can now safely use stickies without a polyfill, all modern browserssupport them natively.
The most accurate sticky polyfill out in the wild.
Check outthe demoanduse cases test page.
-
supports top-positioned stickies,
-
works in IE9+,
-
disables itself in older IEs and in browsers with native
position: stickysupport, -
mimics original
position: stickybehavior:- uses parent node as a boundary box,
- behaves nicely with horizontal page scrolling,
- only works on elements with specified
top, - mimics native
topandmargin-bottombehavior, works with table cellsremoved for consistency until Firefoxmakes a native implementation
- doesn't support left, right, bottom or combined stickies,
- doesn't work in overflowed blocks,
- doesn't parse your CSS! Launch it manually.
Installation Usage Pro tips API Feature requests Bug reports Contributing Buy me a beer
npm install stickyfilljs --save
yarn add stickyfilljs
Download minified production ES5 script:
Include it on your page:
<scriptsrc= "path/to/stickyfill.min.js"></script>First things first, make sure your stickies work in thebrowsers that support them natively,e.g.:
<divclass= "sticky">
...
</div>.sticky{
position:-webkit-sticky;
position:sticky;
top:0;
}Then apply the polyfill:
JS:
varelements=document.querySelectorAll('.sticky');
Stickyfill.add(elements);or JS + jQuery:
varelements=$('.sticky');
Stickyfill.add(elements);Also worth having a clearfix:
.sticky:before,
.sticky:after{
content:'';
display:table;
}topspecifies sticky’s position relatively to the top edge of the viewport. It accepts negative values, too.- You can push sticky’s bottom limit up or down by specifying positive or negative
margin-bottom. - Any non-default value (not
visible) foroverflow,overflow-x,oroverflow-yon any of the ancestor elements anchors the sticky to the overflow context of that ancestor. Simply put, scrolling the ancestor will cause the sticky to stick, scrolling the window will not. This is expected withoverflow: autoandoverflow: scroll,but often causes confusion withoverflow: hidden.Keep this in mind, folks!
Check outthe test pageto understand stickies better.
element–HTMLElementor iterable element list (NodeList,jQuery collection, etc.). First element of the list is used.
Adds the element as a sticky. Returns newStickyinstance associated with the element.
If there’s a sticky associated with the element, returns existingStickyinstance instead.
elementList– iterable element list (NodeList,jQuery collection, etc.) or singleHTMLElement.
Adds the elements as stickies. Skips the elements that have stickies associated with them.
Returns an array ofStickyinstances associated with the elements (both existing and new ones).
Refreshes all existing stickies, updates their parameters and positions.
All stickies are automatically refreshed after window resizes and device orientations changes.
There’s also a fast but not very accurate layout change detection that triggers this method. Call this method manually in case automatic detection fails.
element–HTMLElementor iterable element list (NodeList,jQuery collection, etc.). First element of the list is used.
Removes sticky associated with the element.
elementList– iterable element list (NodeList,jQuery collection, etc.) or singleHTMLElement.
Removes stickies associated with the elements in the list.
Removes all existing stickies.
Force-enable the polyfill, even if the browser supportsposition: stickynatively.
Array of existingStickyinstances.
Sticky class. You can use it directly if you want:
conststicky=newStickyfill.Sticky(element);Throws an error if there’s a sticky already bound to the element.
Refreshes the sticky, updates its parameters and position.
Removes the sticky. Restores the element to its original state.
These features will never be implemented in Stickyfill:
- Callbacks for sticky state changes
- Switching classes between different sticky states
- Other features that add non-standard functionality
If your request isn’t about one of these, you are welcome tocreate an issue.Please checkexisting issuesbefore creating new one.
Stickyfill is apolyfill.This means that it implements a feature (sticky positioning in this case) that already exists in some browsers natively, and allows to use this feature in the browsers that don’t support it yet and older versions of the browsers that didn’t support it at the time. This is its only purpose.
This also means that Stickyfill does nothing in the browsers thatdosupport sticky positioning. Which, in turn, means that those browsers won’t support any additional non-standard features.
Checkexisting issuesbefore creating new one.Please provide a live reproduction of a bug.
- Install Git 😱
- Installnode
- Installgrunt-cli
- Clone the repo,
cdinto the repo folder, runnpm install(oryarnif you are fancy).
Ok, you are all set.
cdinto the repo folder and rungrunt.It will build the project from/src/stickyfill.jsinto/distand run the watcher that will rebuild the project every time you change something in the source file.
Make changes to the source file. Stick to ES6 syntax.
Open/test/index.htmlin a browser thatdoesn’t supportposition: stickyto check that everything works as expected. Compare the results to the same page in a browser that supportsposition: sticky.
Commit the changes.DO NOTcommit the files in the/distfolder.DO NOTchange the version inpackage.json.
Make a pull request 👍
UseYarn,dont’t forget to commityarn.lock.