Pysyvät otsikot taulukoissa - CSS-temppuja

Kun vierität alas sivua, jolla on pitkä taulukko, taulukon otsikko vierittää yleensä pois ja muuttuu hyödyttömäksi. Tämä koodi kloonaa taulukon otsikon ja käyttää sitä sivun yläosassa, kun olet vierittänyt sen yli, ja katoaa, kun olet vierittänyt taulukon ohi.

Nykyään olet todennäköisesti parempi käyttää position: sticky;kuin käyttää JavaScriptiä, mutta sinun on soitettava selaimen tukipuhelu itse.

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

Katso Pen
OLD jQuery Technique: Pysyvät otsikot, kirjoittanut Chris Coyier (@chriscoyier)
CodePenistä.