Aanhoudende kopteksten op tabellen - CSS-trucs

Wanneer u naar beneden scrolt op een pagina met een lange tabel erop, scrolt de koptekst van de tabel meestal weg en wordt deze nutteloos. Deze code kloont de koptekst van de tabel en past deze toe aan de bovenkant van de pagina zodra je er voorbij scrolt, en verdwijnt als je langs de tabel bent gescrolld.

Tegenwoordig bent u waarschijnlijk beter af met position: sticky;JavaScript dan met JavaScript, maar u zult die browserondersteuning zelf moeten bellen.

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

Zie de pen
OUDE jQuery-techniek: aanhoudende kopteksten door Chris Coyier (@chriscoyier)
op CodePen.