Ihållande rubriker på tabeller - CSS-tricks

När du rullar ner på en sida med en lång tabell, rullar vanligtvis tabellens rubrik bort och blir värdelös. Den här koden klonar tabellhuvudet och tillämpar den högst upp på sidan när du har rullat bortom den och försvinner när du har rullat förbi tabellen.

Nuförtiden är det förmodligen bättre för dig att använda position: sticky;än att använda JavaScript, men du måste ringa webbläsarsupportet själv.

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); ));

Se Pen
OLD jQuery Technique: Persistent Headers av Chris Coyier (@chriscoyier)
på CodePen.