Pastāvīgās tabulu galvenes CSS-triki

Ritinot lejup pa lapu ar garu galdu, parasti tabulas galvene ritina prom un kļūst nederīga. Šis kods klonē tabulas galveni un pielieto to lapas augšdaļā, kad esat ritinājis pāri tai, un pazūd, kad ritinājāt garām tabulai.

Šajās dienās jūs, iespējams, labāk izmantojat, position: sticky;nekā lietojat JavaScript, taču jums pašam ir jāveic šis pārlūka atbalsta zvans.

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

Skatiet Pen
OLD jQuery Technique: Chris Coyier (@chriscoyier) pastāvīgās galvenes
vietnē CodePen.