Encabezados persistentes en tablas | Programar Plus

Cuando se desplaza hacia abajo en una página con una tabla larga, normalmente el encabezado de la tabla se desplaza y se vuelve inútil. Este código clona el encabezado de la tabla y lo aplica en la parte superior de la página una vez que se ha desplazado más allá de él, y desaparece cuando se ha desplazado más allá de la tabla.

En estos días, probablemente sea mejor usar position: sticky; que usar JavaScript, pero tendrá que hacer esa llamada de soporte del navegador por su cuenta.

function UpdateTableHeaders() {
   $("div.divTableWithFloatingHeader").each(function() {
       offset = $(this).offset();
       scrollTop = $(window).scrollTop();
       if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) {
           $(".tableFloatingHeader", this).css("visibility", "visible");
           $(".tableFloatingHeader", this).css("top", Math.min(scrollTop - offset.top, $(this).height() - $(".tableFloatingHeader", this).height()) + "px");
       }
       else {
           $(".tableFloatingHeader", this).css("visibility", "hidden");
           $(".tableFloatingHeader", this).css("top", "0px");
       }
   })
}

$(document).ready(function() {
   $("table.tableWithFloatingHeader").each(function() {
       $(this).wrap("<div class="divTableWithFloatingHeader" style="position:relative"></div>");
       $("tr:first", this).before($("tr:first", this).clone());
       clonedHeaderRow = $("tr:first", this)
       clonedHeaderRow.addClass("tableFloatingHeader");
       clonedHeaderRow.css("position", "absolute");
       clonedHeaderRow.css("top", "0px");
       clonedHeaderRow.css("left", "0px");
       clonedHeaderRow.css("visibility", "hidden");
   });
   UpdateTableHeaders();
   $(window).scroll(UpdateTableHeaders);
});

Ver la pluma
ANTIGUA técnica de jQuery: encabezados persistentes de Chris Coyier (@chriscoyier)
en CodePen.