Όταν κάνετε κύλιση προς τα κάτω σε μια σελίδα με έναν μακρύ πίνακα πάνω της, συνήθως η κεφαλίδα του πίνακα μετακινείται και γίνεται άχρηστη. Αυτός ο κώδικας κλωνοποιεί την κεφαλίδα του πίνακα και τον εφαρμόζει στο πάνω μέρος της σελίδας μόλις πραγματοποιήσετε κύλιση πέρα από αυτόν και εξαφανίζεται όταν κάνετε κύλιση πέρα από τον πίνακα.
Αυτές τις μέρες, μάλλον προτιμάτε να χρησιμοποιείτε position: sticky;από το JavaScript, αλλά θα πρέπει να πραγματοποιήσετε τη δική σας υποστήριξη προγράμματος περιήγησης.
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); ));Δείτε την
τεχνική Pen OLD jQuery: Persistent Headers από τον Chris Coyier (@chriscoyier)
στο CodePen.