Sometimes you get the requirement to fix either the Grid or Table Header when we end up with many rows or you have to fix the header of a page or fix the header within the particular section in a page or Top Menu to be fixed or sidebar menu or layer to be scrollable or floating or fixed.
For all the above the concept is the same in terms of visual appearance but the methods are different to achieve the same Sticky Header or Menu or Section or Table or Grid Header etc.
I took jQuery library as I had to prepare some sticky stuff using jQuery. In this process of finding the various approaches for various sticky layer scenarios, I found the following Plugins, Scripts, and Tutorials to be very useful to customize the script as per your layout requirements.
Chromatable JQuery Plugin
Chromatable a JQuery Plugin to create scrollable tables with fixed headers once can call the “chromatable()” with customized options with width, height, and scrolling method on any table, or many tables on the same page.
FixedHeaderTable in its simplest jQuery plugin to display a fixed header for any valid table mark-up. This is an active jQuery plugin project so you can expect new features and improvements to be released going forward. With this plugin apart from the Header one can even fix the footer using the tables tfoot element or cloning the thread as a fixed footer. This plugin is very lightweight, easy to use, and performant.
Table Fixed Header
How to create sticky table headers using jQuery, jquery sticky plugin
This plugin is very tiny and easy to use and comes with simple floating or sticky page table or grid header when a page is scrolled down and the table headers reach the top and sticks there. Can consider this plugin when you have a huge grid on a single page.
FixedTable jQuery plugin by Nova Software not only fixes the header but also can fix the columns too, this is really useful plugin if you want to fix the header as well as a single first column and also footer too. This means this allows horizontal and vertical scroll, supports multiple tables in a single page, number of fixed columns can also be customized, row mouseover and mouseout colors can also be customized. What else we can expect now :) You can give this a try.
stickyHeader is another jQuery plugin, it’s not only a jQuery plugin – it is also a Prototype, Moo Tools, and Dojo Toolkit plugin – sounds cool and very handy in terms of using the plugin in various frameworks right? stickyHeader.js makes table headers stick to the top of the viewport when scrolling down long HTML data grids or tables.
Persistent Headers is not a jQuery plugin but is the custom-coded version that can be enhanced further. This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you’ve scrolled past that relevant section.
Sticky Section Headers
Sticky Section Headers is one of my favorite jQuery lightweight plugins which takes a nested list and enables section headings to stick to the top same as you see it in iOS table views. When you scroll down, always the current section header sticks to the top until the next heading pushes it out of the viewport.
Stickem jQuery plugin is almost similar to Sticky Section Headers. Instead of the header, this is for sticky sidebars, the concept is the same the presentation is different which actually makes items sticky as you scroll, to a particular point.
Create a Sticky Navigation Header Using jQuery Waypoints
This is a nice tutorial that makes you understand how and when the sticky thing happens and how to customize the same. Very useful for many sites that want to stick or float their Navigation Menu by using simple jQuery code.
Facebook Style Scroll Fixed Header in JQuery
This is almost similar to the above Sticky Navigation, here it is just a simple layer. We just need to understand how the sticky or float thing works, if we know it we can create our own version of sticky elements to give a visual treat to your layouts. This is a small JQuery based solution to make a DIV of header fixed on top of the screen while you scroll.
Simple smart sticky navigation bar with jQuery
This is almost similar to the above two scripts, everyone has got their own style and concept of coding, finally what matters is how optimized is your code to achieve the desired functionality. This is another simple and custom script to stick your navigation bar on top of the page.
Create a Sexy Persistent Header with Opacity Using MooTools or jQuery
Persistent Header with Opacity using Moo Tools and jQuery is of the same concept with opacity as an additional feature. Moo Tools uses the following ScrollSpy plugin.
jQuery Sticky Header
Another similar approach is to create a sticky header that is initially in its original place above the content, but as soon we start scrolling down the long page, it sticks at the top of the page. When scrolling up the page, the sticky header stops sticking and returns to its original position. We will use jQuery to create a sticky header.
How To: Create A Fixed (Sticky) Header
This is a basic version to make a layer Sticky or fixed, this tutorial will help you to understand the concept of this approach. I follow this to make my own lighter version of the sticky or fixed layer.
jQuery Sticky Header
This script concept is almost similar to the above one. You could give this a try though.
StickyScroll is another jQuery plugin for creating sticky or floating elements or layers to the top of the page when scrolling down. This is not currently in the development phase – you could give it a try though.
How To: Create a jQuery sticky sidebar
This script uses SMART STICKY FLOATING BOX which is currently in the development phase. This tutorial will show you how to implement a jQuery sticky and animated sidebar, the sidebar will slide up and down the screen respective to which way you are scrolling, this way the sidebar is always visible on the screen.
I hope you found these plugins and tutorials to be very useful to create your own version of Sticky or Floating layers or elements for your website or applications. Good Luck and let us know if you found something similar and worth sharing with fellow web developers.