15 jQuery Sticky HTML Element Plugins

In this post, find a compiled list of 15 jQuery plugins that can be used to create sticky headers, footers, sidebars or navigation. Some of the plugins in list below allow you to stick any DOM element. These plugins are light-weight and easy to integrate.

1. Headhesive

Headhesive.js creates an on-demand sticky header. Specify where you want your header to become fixed and the rest is magic.

2. Midnight

A jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content below it.

MakeFixed.js is a jQuery plugin to dynamically set up elements to be fixed during scroll. It's lightweight and allows callback functions.

Sticky-Kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.

5. stickUp

stickUp is a jQuery plugin that "sticks" an element to the top of the browser window while scrolling, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.

6. StickyStack.js

StickyStack is a jQuery plugin that creates a stacking effect by sticking panels as they reach the top of the viewport.

Slinky.js is a jQuery plugin to create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times.

Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.

Stickr.js is a jQuery plugin that helps you create multiple sticky elements on a page and comes with a robust set of options that allows anyone to make it work great on their setup.

Headtacular is a nice minimalist sticky header a jQuery plugin.As the user scrolls, the script will check if they have scrolled past the scrollPoint. If so, it will add the CSS class .is-stuck to the targeted object.

It's a simple jQuery plugin for making sticky header.

Stick Em Up is a jQuery plugin that provides easy way to determine when an element has been reached, passed, and passed back.

HC-Sticky is a cross-browser jQuery plugin that makes any element on your page float. It is used for sidebars on long pages, so they can be visible all the time user scrolls down the page, instead of an empty space visitors usually see. It is also used for floating top menus, emphasizing it to the user at all time.

stickyNavbar is a jQuery plugin that helps you stick your navigation bars to the top of the browser window during scrolling.

15. sMint

Smint is a simple jQuery plugin that helps with the navigation on one page style websites. It has 2 main elements, a sticky navigation bar that stays at the top of the page while you scroll down and menu buttons that automatically scroll the page to the section you clicked on.


Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..