How make sticky headers for several table headers?

Question

So I have a several tables with several rows and columns. Since the information is huge I want to keep the table headers fixed on top when scrolling. When the one header comes, the previous one will hide and the current one will stay fixed.

This is the js code I have so far:

function makeTableHeadersSticky(tableId) {

var thArr = $(tableId + " th");
var thWidthsArr = [];
var calcWidth = 0;
$(tableId + " th").each(function(){
    calcWidth = $(this).css("width");
    thWidthsArr.push(calcWidth);
});

var pos = $(tableId).offset();

var thTop = pos.top + "px";

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() {

    //var firstRow = $(tableId + " tr:first-child").offset();
    var lastRow = $(tableId + " tr:last-child").offset();
    var w = $(window);
    //console.log("(first,last): ("+(firstRow.top-w.scrollTop())+","+(lastRow.top-w.scrollTop())+")");

    if(($(window).scrollTop() > pos.top) && (lastRow.top-w.scrollTop() >= 0)) {
        $(tableId + " tr:first-child").css("position", "fixed");
        $(tableId + " tr:first-child").css("top", "0px");
        $(tableId + " tr:first-child").css("left", "9px");
    } else {                        
        $(tableId + " tr:first-child").css("position", "static");
        $(tableId + " tr:first-child").css("top", thTop);

    }
});

}

makeTableHeadersSticky("#myTable");

If you see on my code I played with the positions of the table and the last row of the table to see where the table is. This way I can set the header position as fixed or static.

Here is my jsfiddle

Answer 1

Everything works just fine here. You just omitted to call the makeTableHeadersSticky function for the second table :

makeTableHeadersSticky("#myTable2");

demo