टेबल्स पर लगातार हेडर - सीएसएस-ट्रिक्स

जब आप उस पर एक लंबी तालिका के साथ एक पृष्ठ को नीचे स्क्रॉल करते हैं, तो आमतौर पर तालिका का शीर्षलेख दूर स्क्रॉल करता है और बेकार हो जाता है। यह कोड टेबल हेडर को क्लोन करता है और इसे पृष्ठ के शीर्ष पर लागू करता है जब आप इसे परे स्क्रॉल कर चुके होते हैं, और टेबल से अतीत में स्क्रॉल करने पर गायब हो जाते हैं।

इन दिनों, आप शायद 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); ));

पेन
ओएलडी jQuery तकनीक देखें : कोडपेन
पर क्रिस कॉयर (@chriscoyier) द्वारा लगातार हेडर ।