We observe various new features on every website these days which include certain elements in a stagnant state on the web page, even when you scroll up or down the page. This goes for the header or the sidebar as well. The good part about this feature is that it is readily available whenever the user wants to use it. This is known as the Sticky element. If you are curious about this feature then you might know that it can be achieved by using CSS. But you should know that this method is not workable on multiple platforms, and neither is it reliable.

However, this can be facilitated by using a handful of JS libraries and jQuery plugins. For your convince we have gathered here a collection of jQuery Sticky Plugins which will enable you to get hold of this particular UX design in a hassle-free way.

Waypoints

It is a library which uses the element position in view point in order to deliver a particular function. It features a shortcut function which allows the element to get “sticky”. It is easily customizable where you can customize the up, down scroll feature depending on where you want your element to be fixed.

Waypoints

Sticky-Kit

This kit is widely known because of its multiple uses. It can be used to stick a particular feature to your website. Not only that but this feature can also be attached within a parent element which you would be designating to multiple elements. It’s a package which comes with several advanced settings which you can use to customize Events and triggers.

Sticky-Kit

StickyJS

This is a Jquery sticky plugin which is quiet easy to use. You may use it directly out of the box. However, if you require any customization, the option/settings tool is available for your use.

StickyJS

HeadRoom

If you want a sticky site header, it normally takes up a lot of valuable vertical space which it crucial whenever you want to view your site on mobile. Headroom is a smart JavaScript library which makes your header smarter. The header sort of sticks itself with the scrolling, such that it will be visible when going down the page, as well as scrolling up.

HeadRoom

MakefixedJS

This JavaScript library enables you to attach your element dynamically just as users scroll through the page.  You only need to enable the makeFixed() function with the element you want to make sticky.

MakefixedJS

MidnightJS

Through this you can stick multiple headers/elements and you also have the option of switching between them, based on where they are present in the document (DOM tree). You also have the option of changing the color of the fky by adding the data-midnight attribute, with a particular color name.

MidnightJS

Scroll magic

If you looking for advanced features this JS might just be your thing. These features add interaction during the page scroll. You have the option of pinning the elements from a specific scroll position, add elements to it based on the scroll position and you can also make a good parallax effect.

Scroll magic

onScreen

This is quite like the Waypoints, in a way that it enables you to execute functions just as your element is about to enter, leave or reach certain position inside a browsers viewport.

onScreen

jQuery Pin

Much like its name, this is a small jQuery plugin which is used to “pin” or “unpin” your elements to a certain position in the webpage.

jQuery Pin

Sticky Float

Sticky Float enables the users to give elements a persistent position as compared to its parent. You have the option by using the sticky position with accordance to your needs. You can use the provided parameters and change the value accordingly.

Sticky Float

Zebra Pin

It is a lightweight plugin which can stick any element pin to their container. This also allows you to add the “sticky” feature to your elements which are included in your projects such as navigation, sidebars, headers and footers.

Zebra Pin

HC-Sticky

You can stick the elements with reference to their container to any given element or even a document. You can adjust a few options that are present in the plugin such as distance from top, bottom or even how it floats.

HC-Sticky

Sticky Mojo

This is a lightweight and fast plugin which works rapidly. It is compatible with all modern browsers.

Sticky Mojo

Sticky Navbar

This plugin works well if you want to make a single page that sticks when you scroll it down. This plugin puts the navigation bar at the top of the browser window and also highlights the anchor link which connects the corresponding section to your page.

Sticky Navbar

StickyStack

This makes elements stick with another element whenever users scroll down the page. In addition to that your long page is converged to a stack of cards with this library.

StickyStack

LEAVE A REPLY

Please enter your comment!
Please enter your name here