Vedvarende overskrifter på tabeller - CSS-triks

Når du blar nedover på en side med et langt bord, ruller vanligvis toppteksten på tabellen bort og blir ubrukelig. Denne koden kloner tabelloverskriften og bruker den øverst på siden når du har rullet utover den, og forsvinner når du har rullet forbi tabellen.

I disse dager er det sannsynligvis bedre å bruke position: sticky;enn å bruke JavaScript, men du må ringe nettleserstøtteanropet 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 av Chris Coyier (@chriscoyier)
på CodePen.