Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way!
#
By
Chris Coyier
Just like the title says! Here's a sidebar navigation bar that...
- Uses sticky positioning. It stays on the screen when it can, but won't overlap the header, footer, or ever make any of it's links inaccessible.
- Scrolls smoothly to the sections you click to.
- Activates the current nav based on scroll position (it's a single page thing).
#
By
Chris Coyier
You know how
position: relative creates a new context for absolute positioning within an element? Well, position: sticky is a locally scoped version of position: fixed. Let's take a look at how that works using a modal with a sticky close button as an example.
#
By
Jeff Wainwright
Stickybits is a small JavaScript utility plugin. It's goal is not to get in the way. It does one thing well: help with sticky elements. It is not dependent on other JavaScript Plugins, can be imported via npm, and approaches sticky elements in a very utility-oriented way.