SMART STICKY – 10 JQUERY PLUGINS

onScreen

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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.

Ref url