Trajne glave na mizah - CSS-triki

Ko se pomaknete navzdol po strani z dolgo tabelo, se običajno glava tabele pomakne stran in postane neuporabna. Ta koda klonira glavo tabele in jo uporabi na vrhu strani, ko se pomaknete čeznjo, in izgine, ko se pomaknete mimo tabele.

Danes je verjetno bolje position: sticky;, če uporabljate JavaScript, vendar boste morali to podporo za brskalnik poklicati sami.

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

Oglejte si
tehniko Pen OLD jQuery: Trajne glave Chrisa Coyierja (@chriscoyier)
na CodePen.