Vedvarende overskrifter på borde - CSS-tricks

Når du ruller ned på en side med en lang tabel på, ruller typisk overskriften på tabellen væk og bliver ubrugelig. Denne kode kloner tabeloverskriften og anvender den øverst på siden, når du har rullet ud over den, og forsvinder, når du er rullet forbi tabellen.

I disse dage er du sandsynligvis bedre stillet med at bruge position: sticky;end at bruge JavaScript, men du bliver nødt til at foretage det browseropkald på egen hånd.

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 af Chris Coyier (@chriscoyier)
på CodePen.