jQuery Plugins for Creating Sticky Elements and Fixed Headers
Whether it is blog, portfolio or a business website, fixed websites headers, sticky menus and the sidebar are in trend, you can create this effect by jQuery plugins rather than custom coded effects. There are myriad of jQuery Plugins which help you to create sticky elements and fixed headers for your websites with few lines of codes.
In this article we would like to present our audience 25 jQuery Plugins for Creating Sticky Elements and Fixed Headers, following plugins provides number of features and functions which will make your website layout and navigation more strong and beautiful. Enjoy !!
1. StickyNavbar.js
stickyNavbar.js is a jQuery plugin that helps you stick your navigation bars to the top of the browser window during scrolling. It could stop right here but stickyNavbar.js offers more: you can use your favourite jQuery effects or even fantastic Animate.css library to spice up your navigation. The plugin offers lot of options to suit everyone's needs.
2. MakeFixed.js
MakeFixed.js is a jQuery plugin to dynamically set up elements to be fixed during scroll. It's lightweight and allows callback functions.
3. Sticky
Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible.
4. Sticky TableHeaders
StickyTableHeaders is a jQuery plugin that makes large tables more usable by having the table header stick to the top of the screen when scrolling.
5. jQuery Pin
jQuery Pin is a jQuery plugin for creating sticky elements. You can pin something to the side of a text and subtle sticky element to quietly hang around as you scroll down. Also you can easily disable this for smaller screen-sizes where there's no room for that kind of shenanigans.
6. StickyMojo
stickyMojo is a contained sticky sidebar plugin for jQuery. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+. It will degrade gracefully in older versions of IE.
7. jQuery Lockfixed
jQuery lockfixed allows for DOM elements to be positioned anywhere on the page, and lock within the user's viewport when scrolling. Common use case is a menu under a header, which on scrolling stays fixed within the viewport.
8. floatThead
floatThead is a floating/locked/sticky table header jQuery plugin that requires no special CSS and supports window and overflow scrolling.
9. jQuery Sticky Elements
A jQuery plugin to create sticky elements -- worrying how to keep your div at position you want, want to create rules for it to stay & hide, jQuery-sticky-elements is made just for you.
10. Sticky
Sticky is a simple notification system that allows you to send such messages with ease, and class. Quickly notify a user of software updates, process completions, or annoy them with registration reminders.
11. Hachiko
Hachiko is a jQuery sticky plugin that allows a relatively positioned element to be stickied onto the screen when the element is scrolled outside of the viewport. Instead of changing the position of the element on window scroll, this plugin creates a clone of the original element and set the clone to be fixed positioned so the original layout is always preserved.
12.Auto Hide Sticky
Auto-hide sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same. Auto-hide means hiding the header automatically when a user starts scrolling down the page and bringing the header back when a user might need it: they reach the bottom of the page or start scrolling up. There are at least two manners of hiding a header: reactive and lazy.
13. jQuery Sticky Alert
Sticky Alert is a minimal jQuery plugin to add a sticky alert bar to the top of your website. It's available under the MIT license and is free for use on personal or even commercial projects.
14. Sticky Table
Sticky Table is a simple jQuery plugin to make table header sticky on scroll, you'll never loose your tables header.
15. jQuery Stick’em
jQuery Stick ’em plugin makes items sticky as you scroll, to a point. Easy to implement and flawless to the point of perfection, this is indeed a very useful plugin.
16. hcSticky
hcSticky 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 a empty space visitors usually see. It is also used for floating top menus, emphasizing it to the user at all time.
17. Position Sticky
jQuery.positionSticky is a sticky positioning polyfill for jQuery. Support for display and float properties example and sidebar example included.
18. Fixto
fixto is a jQuery plugin for sticky positioning. Fix containers to the viewport relative to an ancestor. It is responsive, can handle multiple instances, sensitive to viewport height and can start, stop and destroy.
19. ScrollToFixed
ScrollToFixed is a jQuery plugin that used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.
20. Sticky Kit
Sticky-Kit is a jQuery plugin for making smart sticky elements Sticky-Kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.
21. StickyUp
stickUp is a simple jQuery plugin that allows you to designate an element or navigation menu which will stick to the top of the page once scrolled past, and will return to place when scrolled past the other way.
22. Headhensive.js
Headhesive.js creates an on-demand sticky header. Specify where you want your header to become fixed and the rest is magic. It’s a standalone JavaScript plugin with no dependencies.
23. jQuery Auto Fix Anything
Auto Fix Anything jQuery plugin will let you automatically fix position of any container on your website with one JS call. The plugin will detect when to fix/unfix the position automatically.
24.Sticky Sidebar
Sticky Sidebar is a jQuery plugin for sticky/fixed contents (headers, sidebars, footer, etc...).
25. 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.
