Üzerinde uzun bir tablo olan bir sayfayı aşağı kaydırdığınızda, tipik olarak tablonun başlığı kayar ve işe yaramaz hale gelir. Bu kod, tablo başlığını klonlar ve bunun ötesine geçtiğinizde sayfanın üst kısmına uygular ve tabloyu geçtiğinizde kaybolur.
Bugünlerde muhtemelen position: sticky;JavaScript kullanmaktan daha iyisiniz , ancak bu tarayıcı desteğini kendi başınıza yapmanız gerekecek.
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); ));
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen ESKİ jQuery Technique: Persistent
Headers'a bakın.