It is now common to use some fixed elements on a site when you scroll up or down. This allows for the element to be readily available regardless of the user’s position.
They are called sticky element, an effect that can be achieved just by using CSS, however, using this method, the effect is not reliable across multiple browsers. That is why we’ve listed smoe JS libraries and jQuery plugins that will allow you to achieve this particular UX design.
1. Waypoints
Waypoints is a library to execute a function based on the element position in the viewport.
- Dependency: None / jQuery (optional)
- License: MIT license
2. Sticky Kit
With StickyKit, not only can you make an element stick within the viewport, but you can also make them stick within the parent element you designate to multiple elements at once.
- Dependency: jQuery
- License: WTFPL
3. StickyJS
StickyJS is an easy-to-use jQuery sticky plugin that does what it says.
- Dependency: jQuery
- License: MIT license
4. HeadRoom
Headroom is a JavaScript library that will make your sticky header smart; the header will be hidden when users scroll down the page and show up upon scrolling up.
- Dependency: None / jQuery (optional) / Angular (optional)
- License: MIT license
5. MakefixedJS
Makefixed lets you make elements be fixed dynamically as users scroll the page. J
- Dependency: jQuery
- License: GPL
6. MidnightJS
Midnight allows you to stick multiple headers / elements and switch between them based on their position within the document (DOM tree), check out the demo to see what I mean. In addition you can change their color on the fly simply by adding the data-midnight attribute with the specified color name.
- Dependency: jQuery
- License: MIT license
7. ScrollMagic
ScrollMagic has advanced features to add interaction, during a page scroll.
- Dependency: jQuery / Velocity.js
- License: Dual License (MIT and GPL)
8. onScreen
onScreen is similar to Waypoints — it allows you to execute functions as the element is entering, leaving, or reaching certain positions within the browser viewport.
- Dependency: jQuery
- License: MIT license
9. jQuery Pin
jQuery Pin is a small jQuery plugin to “pin” or “unpin” elements to a position, when you scroll the page. My most favorite part of this plugin is the option to disable it at certain viewport widths.
- Dependency: jQuery
- License: BSD license
10. Sticky Float
Sticky Float allows us to give elements a fixed position that is relative to its parent.
- Dependency: jQuery
- License: Undefined
11. Zebra Pin
Zebra Pin is a lightweight plugin to make any element pin to their container.
- Dependency: jQuery
- License: GPL license
12. HC-Sticky
With HC-Sticky, you can make sticky elements that refer to its container, to any given element, or to the document itself. This plugin has some options that you can adjust to your need, like distance from the top and bottom to start floating, and other options.
- Dependency: jQuery
- License: MIT license
13. Sticky Mojo
Sticky Mojo is a lightweight, fast, and flexible jQuery plugin to make awesome sticky elements. It’s compatible with modern browsers and will degrade gracefully in IE.
- Dependency: jQuery
- License: MIT license
14. Sticky Navbar
If you want make single page navigation which sticks when one scrolls down, this library is for you.
- Dependency: jQuery
- License: MIT license
15. StickyStack
StickyStack will make elements stack with another when users scroll the element and reach the top of the viewport. With this library, your long page will transform into stacked cards.
- Dependency: jQuery
- License: Undefined