Header Tetap di Tabel - Trik CSS

Saat Anda menggulir ke bawah halaman dengan tabel panjang di atasnya, biasanya header tabel akan bergulir dan menjadi tidak berguna. Kode ini mengkloning header tabel dan menerapkannya di bagian atas halaman setelah Anda menggulir di luarnya, dan menghilang saat Anda menggulir melewati tabel.

Saat ini, Anda mungkin lebih baik menggunakan position: sticky;daripada menggunakan JavaScript, tetapi Anda harus membuat panggilan dukungan browser itu sendiri.

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

Lihat
Teknik Pen OLD jQuery: Persistent Headers oleh Chris Coyier (@chriscoyier)
di CodePen.