It’s now become common practice to add elements in a website that are fixed to a position when a user scrolls up or down the site, like the navigation menu, the header, sidebar, etc. This allows the element to be readily available no matter the user’s position. This is called a sticky element, and it can be achieved by using CSS.
The problem with sticky elements is that they’re not all reliable across multiple browsers. For that, we have put together 10 useful jQuery plugins to help you create sticky elements and easily achieve this type of UX design.
onScreen is jQuery plugin lets you perform functions as an element is entering, leaving or reaching certain positions with the browser viewport. It’s dependent on jQuery and is licensed under the MIT license.
Sticky-kit not only allows you to create smart sticky elements within the viewport, but also lets you make them stick within the parent element you assign to multiple elements at once. It also has advanced settings like custom Events and Triggers. It’s licensed under WTFPL.
This library allows you to create elements that can be fixed dynamically as users scroll the page. Simply call the makeFixed() function on the element you want fixed and you’re good to go!
stickyfloat is a lightweight (only 1.2KB minified and gzipped) jQuery plugin that lets you have a sticky element that’s relative to its parent. A normal fixed-position element is “out of context” and is difficult to use in the most common situations with fluid designs. This plugin will solve your problem with as little code as possible, while at the same time allowing you to customize the element in any way you like.
This handy jQuery plugin lets you create smart sticky elements on your page, so they will always stay visible. It’s an easy-to-use plugin that does what it says and works out of the box. It’s highly customizable, as well, as it comes with Options/Settings, Custom Methods, and Events.
Midnight lets you stick multiple headers/elements and switch between them based on their position within the document. What’s more, you can change their color on-the-fly simply by adding the data-midnight attribute with the specified color name.
Do you want to pin something to the side of a text? In need of a subtle sticky element to quietly hang around as you scroll down? This jQuery plugin will solve your problem! With it, you can pin any element to the top of a container. You can also easily disable it for smaller screen sizes where space is limited.