15 Awesome Plugins For Creating Sticky Elements

15 Awesome Plugins for Creating Sticky Elements
by Janeth Kent Date: 04-03-2017 jquery sticky element plugins libraries


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
  • LicenseUndefined

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
  • LicenseUndefined
 
by Janeth Kent Date: 04-03-2017 jquery sticky element plugins libraries hits : 5215  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

Related Posts

Vanilla JavaScript equivalent commands to JQuery

JQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it in your projects to accomplish basic tasks like selecting elements, styling…

Is jQuery going to die in 2019?

For a while, JQuery's relevance has been a topic of debate among web developers. We were curious as web developers interested in Javascript to know what others have to say…

Best 5 Javascript NewsTicker Plugins

Not all developers know the marquee tag of HTML, that allows you to create a scrolling piece of text or image displayed that is shown horizontally or vertically on the DOM.…

Working with JSON in JavaScript

JSON is short for JavaScript Object Notation and an easy - to - access way to store information. In short, it gives us a collection of human - readable data…

Top 10 JavaScript Books 2019

Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications. If you're an aspiring web developer then…

6 JavaScript Utility Libraries you Should Know in 2019

Nowadays Javascript is the most popular and widely used programming language, so the ecosystem around it constantly grows. However, it is expected that the small "standard library" of Javascript will remain…

10 JavaScript podcasts for web developers

1. Syntax.fm  Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks…

JavaScript Manual for Beginners

The JavaScript Manual shows you how to use JavaScript and gives an overview of the language. I   GETTING STARTED ABOUT Created by Netscape in 1995 as an extension of HTML for Netscape Navigator…

Top JavaScript Libraries in 2018

As Javascript remains the most popular and widely used programming language in 2018, so grows the ecosystem around it. JavaScript has gained immense popularity over the span of a few years.…

30 Reference Guides for JavaScript: jQuery, Node.js, and React

This is a list intended to introduce new developers to JavaScript (jQuery, Node.js and React) and help experienced developers learn more.   jQuery jQuery API (Official) View → jQuery Cheatsheet (Devhints) View → jQuery Cheat Sheet (JavaScript Toolbox) View → jQuery Quick…

Useful jQuery code snippets for responsive websites

When you have to manage a web project, jQuery can be of great help. In this article, we have compiled some jQuery tips and tricks for making and enhancing responsive…

10 jQuery snippets every developer should know 

For this post, we would like to share with our readers 10 JQuery Code Snippets which we’ve collected that users can copy and paste directly into their themes by which to create…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration