- jQuery, post version 1.7
npm install js-sticky
or just include the js file in your project.
Then in the file:
On your page, define these ids:
#sticky-bottomelement (former is stickied to the top of the viewport, latter is stickied to the bottom of the viewport)
#sticky-triggerelement (the point at which the sticky behavior should trigger--if it's just a position in the page, can just make an empty div like
- if your
#stickyelement takes up space in the DOM (i.e. is
staticand NOT floating), wrap
page stuff blah blah <div id="sticky-trigger"></div> <div id="sticky-cont"> <div id="sticky"> sticky element here! </div> </div>
Behavior: On scrolling past
sticky div will be stuck. On scrolling back up past
sticky will act as normal.
Nothing is needed to initialize the sticky behavior; the jQuery takes care of that. Default trigger is
document ready, or you can overwrite with your own event in the script. The script is pretty thoroughly commented.
- an example of a sticky element anchored to the top of the page: here (on left)
- an example of a sticky element anchored by the bottom: here (scroll to the comments section) (on right)
Current limitations (future to-dos)
- must manually define a
- can only have 1
sticky-bottomelement per page
Please report issues through Github, or feel free to open a PR with a fix. Thanks!