Persistente Überschriften auf Tabellen - CSS-Tricks

Wenn Sie eine Seite mit einer langen Tabelle nach unten scrollen, wird in der Regel die Kopfzeile der Tabelle entfernt und unbrauchbar. Dieser Code klont den Tabellenkopf und wendet ihn oben auf der Seite an, sobald Sie darüber gescrollt haben. Er verschwindet, wenn Sie über die Tabelle gescrollt haben.

Heutzutage sind Sie wahrscheinlich besser dran position: sticky;als JavaScript, aber Sie müssen diesen Browser-Support-Aufruf selbst durchführen.

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(" "); $("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); ));

Weitere
Informationen finden Sie in der Stift- OLD-jQuery-Technik: Persistente Header von Chris Coyier (@chriscoyier)
auf CodePen.