Nuolatinės lentelių antraštės CSS-gudrybės

Kai slenkate žemyn puslapyje, kuriame yra ilga lentelė, paprastai lentelės antraštė slenka tolyn ir tampa nenaudinga. Šis kodas klonuoja lentelės antraštę ir pritaiko ją puslapio viršuje, kai jau slenkate už jos ribų, ir dings, kai slinksite pro lentelę.

Šiomis dienomis jums tikriausiai geriau naudotis, position: sticky;nei naudoti „JavaScript“, tačiau turėsite patys paskambinti šiai naršyklės palaikymo tarnybai.

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

Žr. „Pen
OLD jQuery Technique“: Chris Coyier (@ chriscoyier) nuolatinės antraštės „
CodePen“.