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.

Enjoy!

 

 

onScreen

shot-20150424-1671-1mww4gs

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.

 

Headroom.js

headroom

This extremely lightweight and high-performance JavaScript widget (no dependencies!) lets you react to the user’s scroll. It slides out of view when scrolling down, and slides back in when scrolling up, as seen on their website.

 

Sticky-kit

shot-20150424-1671-fc79fr

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.

 

ScrollMagic

scroll-magic

This JavaScript library comes with advanced features for adding interaction during a page scroll. You can pin elements from specific scroll positions, add animations based on scroll positions, and even make a nice parallax effect.

 

Waypoints

wayppoint

Waypoints is a JavaScript library that you can use to execute a function based on the position of elements in the viewport. It comes with a shortcut function for creating smart sticky elements. You can also customize the scrolling direction: up, down, and even right and left (and elements should stick within the viewport).

 

Makefixed.js

makefixed

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

sticky-float

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.

 

Sticky

shot-20150424-1671-1xr22d8

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.js

shot-20150424-1671-1dxug79

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.

 

jQuery.Pin

shot-20150424-1671-eqxsn1

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.

Create Smart Sticky Elements: 10 jQuery Plugins to Help You Out0Jennifer Sandra2015-04-24 05:35:22It’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 navigati…