Some times 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 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 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.
Table of Contents
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 Header one can even fix the footer using the tables tfoot element or cloning the thead as a fixed footer. This plugin is very lightweight, easy to use and performant.
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 in 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. Means this allows horizontal and vertical scroll, supports multiple tables in 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 an another jQuery plugin, its 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 custom coded version which 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 is one of my favorite jQuery lightweight plugin 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 header this is for sticky sidebars, the concept is same the presentation is different which actually makes items sticky as you scroll, to a particular point.
This is a nice tutorial which makes you understand on how and when the sticky thing happens and how to customize the same. Very useful for many sites who wants to stick or float their Navigation Menu by using simple jQuery code.
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.
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 an another simple and custom script to stick your navigation bar on top of the page.
Persistent Header with Opacity using Moo Tools and jQuery is of same concept with opacity as an additional feature. Moo Tools uses the following ScrollSpy plugin.
An another similar approach to create sticky header that is initially on 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 the 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 sticky or fixed layer.
This script concept is almost similar to the above one. You could give this a try though.
StickyScroll an 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 development phase – you could give it a try though.
This script uses SMART STICKY FLOATING BOX which is currently in 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 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.