Persistente Header auf Tabellen

Wenn Sie auf einer Seite mit einer langen Tabelle nach unten scrollen, verschwindet normalerweise die Kopfzeile der Tabelle und wird nutzlos. Dieser Code klont die Tabellenkopfzeile und wendet sie am oberen Rand der Seite an, sobald Sie darüber hinaus gescrollt haben, und sie verschwindet, wenn Sie an der Tabelle vorbeigescrollt sind.

Heutzutage ist es wahrscheinlich besser, position: sticky; anstelle von JavaScript zu verwenden. Sie müssen jedoch selbst die Entscheidung bezüglich der Browserunterstützung treffen.

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("<div class="divTableWithFloatingHeader" style="position:relative"></div>");
       $("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);
});

Sehen Sie sich den Pen
ALTE jQuery-Technik: Persistente Kopfzeilen von Chris Coyier (@chriscoyier) an
auf CodePen.