Tajuk Ketekunan di Jadual - Trik CSS

Apabila anda menatal ke bawah halaman dengan meja panjang di atasnya, biasanya tajuk meja menatal dan menjadi tidak berguna. Kod ini mengkloning tajuk meja dan menerapkannya di bahagian atas halaman setelah anda menatal di luarnya, dan hilang apabila anda telah menatal melewati meja.

Hari-hari ini, anda mungkin lebih baik menggunakan position: sticky;daripada menggunakan JavaScript, tetapi anda mesti membuat sokongan penyemak imbas 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 jQuery Pen LAMA: Pengetua Tetap oleh Chris Coyier (@chriscoyier)
di CodePen.