Wie sorgt man mit CSS und JavaScript dafür, dass eine Kopfzeile oben auf der Seite bleibt?

So erstellen Sie einen Sticky Header mit CSS und JavaScript

Problem:

Entwerfen Sie einen Header, der fixiert bleibt, sobald der Der Benutzer scrollt über einen bestimmten Punkt auf der Seite hinaus. Ist dies mit CSS und HTML möglich oder ist JavaScript erforderlich?

Lösung mit CSS und JavaScript:

Um einen Sticky-Header mit CSS und JavaScript zu erstellen, Befolgen Sie diese Schritte:

1. HTML: Fügen Sie ein
   hinzu. Element mit der Klasse „sticky“ auf der Seite, auf der die Kopfzeile angezeigt werden soll.

2. CSS: Definieren Sie eine CSS-Klasse mit dem Namen „fixed“ mit den folgenden Eigenschaften:

   • Position: fest;
   • oben: 0;
   • links: 0;
   • Breite: 100 %;

3. JavaScript (jQuery): Verwenden Sie den folgenden JavaScript-Code, um einen Scroll-Ereignishandler an das Fensterobjekt anzuhängen:

   <code class="js">$(window).scroll(function() {
     var sticky = $('.sticky'),
         scroll = $(window).scrollTop();
   
     if (scroll >= 100) {
       sticky.addClass('fixed');
     } else {
       sticky.removeClass('fixed');
     }
   });</code>

Erweitertes Beispiel:

Wenn der Auslösepunkt für den Sticky-Header unbekannt ist, können Sie die Methode .offset().top verwenden, um zu bestimmen, wann das Sticky-Element den oberen Bildschirmrand erreicht . Hier ist der aktualisierte JavaScript-Code:

<code class="js">var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function() {
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= stickyOffset) {
    sticky.addClass('fixed');
  } else {
    sticky.removeClass('fixed');
  }
});</code>

Beispielgeigen:

• Grundlegendes Beispiel: http://jsfiddle.net/gxRC9/501/
• Erweitertes Beispiel: http://jsfiddle.net/gxRC9/502/

Mit diesem Ansatz können Sie einen Sticky-Header mithilfe einer Kombination aus CSS und JavaScript erstellen und ihn somit browserübergreifend verwenden kompatibel und relativ einfach zu implementieren.