Permanente Kopfzeilen

Dies ist ein Code, um die Kopfzeile eines Inhaltsbereichs beim Scrollen durch diesen Inhalt immer am oberen Bildschirmrand sichtbar zu halten. Dann verschwindet sie, wenn Sie an dem relevanten Abschnitt vorbeigescrollt sind.

Ein paar Dinge, die Sie vorab wissen sollten

1. Es gibt viele ähnliche Beispiele, aber dieses ist meins.
2. Dies funktioniert (noch) nicht auf Mobilgeräten (zumindest nicht auf mobilen Safari, das ich mir angesehen habe). Denn ich weiß nicht viel über JavaScript auf Mobilgeräten und wie man Scroll-Events und Scroll-Positionen erkennt und so weiter.

HTML

Zu Demozwecken identifizieren wir Bereiche, auf die wir eine permanente Kopfzeile anwenden möchten, anhand des Klassennamens „persist-area“ und die darin enthaltene Kopfzeile, die permanent sein soll, mit „persist-header“. Dies sind völlig unsemantische Klassennamen, aber Sie würden dies in Ihrer eigenen Implementierung beheben, indem Sie einfach Ihren eigenen Markup kennen und entsprechende Selektoren anwenden.

<article class="persist-area">
   <h1 class="persist-header">
   <!-- stuff and stuff -->
</article>

jQuery JavaScript

Das ist die klare Erklärung dessen, was wir tun werden

1. Wir durchlaufen jeden permanenten Bereich und klonen die Kopfzeile. Die geklonte Kopfzeile bleibt unsichtbar, bis wir sie brauchen.
2. Jedes Mal, wenn das Fenster gescrollt wird, führen wir einige Tests durch.
3. Wenn wir in einen Bereich gescrollt sind, der eine permanente Kopfzeile haben sollte, die aber versteckt wäre, enthüllen wir unsere geklonte Kopfzeile in fester Position. Alle anderen permanenten Kopfzeilen werden versteckt.

Das ganze Paket

function UpdateTableHeaders() {
   $(".persist-area").each(function() {
   
       var el             = $(this),
           offset         = el.offset(),
           scrollTop      = $(window).scrollTop(),
           floatingHeader = $(".floatingHeader", this)
       
       if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
           floatingHeader.css({
            "visibility": "visible"
           });
       } else {
           floatingHeader.css({
            "visibility": "hidden"
           });      
       };
   });
}

// DOM Ready      
$(function() {

   var clonedHeaderRow;

   $(".persist-area").each(function() {
       clonedHeaderRow = $(".persist-header", this);
       clonedHeaderRow
         .before(clonedHeaderRow.clone())
         .css("width", clonedHeaderRow.width())
         .addClass("floatingHeader");
         
   });
   
   $(window)
    .scroll(UpdateTableHeaders)
    .trigger("scroll");
   
});

CSS

Das einzige CSS, das wir direkt mit JavaScript ändern, ist die Sichtbarkeit der permanenten Kopfzeile. Ich finde das ziemlich akzeptabel. Alle anderen Stile sind zu Recht Teil der Klasse. Es ist ziemlich leicht, alles, was wir brauchen, ist

.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
}

Und so...

Nutzen Sie es, wie Sie wollen.

Demo anzeigen   Dateien herunterladen