Трајна заглавља на столовима - ЦСС-трикови

Када померите страницу на којој је дугачка табела, обично се заглавље табеле помери и постане бескорисно. Овај код клонира заглавље табеле и примењује га на врху странице када се померите даље од њега и нестаје када се померите поред табеле.

Ових дана вам је вероватно боље да користите position: sticky;ЈаваСцрипт него да користите ЈаваСцрипт, али мораћете сами да упутите позив за подршку прегледача.

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

Погледајте
технику Пен ОЛД јКуери: Упорна заглавља Цхриса Цоииера (@цхрисцоииер)
на ЦодеПен-у.