How to create sticky table headers using jQuery
Welcome those big, sticky, complicated problems. In them are your most powerful opportunities.
-Ralph Marston
Here s a nice way to use jQuery and make table headers sticky when a page is scrolled down and the table headers reach the top. This is a feature in the new look that Google is sporting, in Google documents, Gmail etc. Obviously Google is not using jQuery to accomplish this and they are probably using some fancy code to do it. This is just a quick way to get it working on table headers.. <th> elements. In this setup we calculate the distance of the table from the top, check if it reaches 0 while scrolling and apply the CSS property position:fixed to it. If it falls back under the distance it had, then we revert the position to normal.
Pass in the table’s id to the function that follows it. For example if you have a table that had an id = “my_table”, then pass this in the document.ready function:
$(document).ready(function(){
makeTableHeadersSticky("#my_table");
});
function makeTableHeadersSticky(tableId)
{
//collect widths of all the th elements
var thArr = $(tableId + " th");
//create an array to hold the auto calculated widths of each element
var thWidthsArr = [];
$(tableId + " th").each(function(){
thWidthsArr.push($(this).css("width"));
});
var pos = $(tableId).offset();
//set the distance of the table from the top,
//we ll need to make the headers sticky when this distance is 0
var thTop = pos.top + "px";
//set the widths of the first and last tr's ths/tds...
//this is done coz in some cases,
//the widths will get messed up if the data was generated dynamically
var count = 0;
$(tableId + " tr:first-child>th").each(function(){
$(this).css("width", thWidthsArr[count]);
count++;
});
count = 0;
$(tableId + " tr:last-child>td").each(function(){
$(this).css("width", thWidthsArr[count]);
count++;
});
$(window).scroll(function(){
if($(window).scrollTop() > pos.top)
{
$(tableId + " tr:first-child").css("position", "fixed");
$(tableId + " tr:first-child").css("top", "0px");
}
else
{
$(tableId + " tr:first-child").css("position", "relative");
$(tableId + " tr:first-child").css("top", thTop);
}
});
}