Fixierter Header mit Scroll-Events

Einen festen Header zu erstellen, der dynamisch auf Scroll-Ereignisse reagiert, ist nicht schwierig. Ihr braucht dafür keine Bibliothek oder irgendein Widget. Alles was Ihr benötigt sind ein paar Zeilen JavaScript und ein wenig CSS. Nun... und Ihr braucht ein Header-Element irgendwo in Eurer Webseite.

Nehmen wir an, dass wir bereits ein Element mit der Id header erstellt haben. Es hat einige grundlegende Stile und befindet sich am oberen Rand des Dokuments. Wie der Header, den ich für diese Webseite erstellt habe.

<header id="header">
  <!-- Some content -->
</header>

#header {
  /* Required styles */
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;

  /* Just for the looks */
  background: #0088aa;
  height: 100px;
}

Wir müssen einen Event-Handler an das Window-Scroll-Event anhängen, um auf Scroll-Ereignisse reagieren zu können. Bitte beachtet, dass Scroll-Ereignisse auf Mobiltelefonen unterschiedlich reagieren können.

var header = document.getElementById('header');
if (header) {
  window.addEventListener('scroll', function _scroll() {
    // This is where the magic happens.
  });
}

Wir müssen prüfen, ob der Benutzer die Webseite gescrollt hat. Dann werden wir den Status des Headers in Abhängigkeit vom Scroll-Status aktualisieren. Wir werden dies tun, indem wir dem Header eine Klasse hinzufügen, wenn die Webseite gescrollt wurde. Wenn der Benutzer zum Anfang der Seite zurückkehrt, entfernen wir diese Klasse wieder.

var header = document.getElementById('header');
if (header) {
  window.addEventListener('scroll', function _scroll() {
    var scrollY = window.scrollY || window.pageYOffset;
    var isScrolled = scrollY > 0;

    header.className = isScrolled ? 'scrolled' : '';
  });
}

#header.scrolled {
  /* Just for the looks */
  background: #aaeeff;
  height: 60px;
}

Das war's auch schon. Wir haben erfolgreich einen dynamischen, fixierten Header erstellt. Wir sind fertig, oder? Aber wartet.... Scroll-Ereignisse werden wirklich oft abgefeuert und DOM-Manipulationen sind teuer. Wir müssten eigentlich nur auf das DOM zugreifen, wenn sich isScrolled geändert hat. Wir können das erreichen, indem wir den isScrolled-Status persistenter speichern.

var isScrolled = false;
var header = document.getElementById('header');
if (header) {
  window.addEventListener('scroll', function _scroll() {
    var scrollY = window.scrollY || window.pageYOffset;
    if (scrollY > 0 !== isScrolled) {
      isScrolled = scrollY > 0;
      header.className = isScrolled ? 'scrolled' : '';
    }
  });
}

Jetzt reagieren wir nur noch, wenn es sich tatsächlich um eine Veränderung handelt. Vielleicht möchtet Ihr auch noch einen kleinen Scroll-Schwellwert hinzufügen, damit sich der Header nicht sofort ändert. Aber das überlasse ich Euch.

Und für diejenigen, die denken.... "Alter, Mikro-Optimierungen sind böse." Ihr habt völlig Recht. In diesem Szenario macht Optimierung nicht viel Sinn. Aber der Vollständigkeit halber wollte ich das auch zeigen. Das kann nützlich sein, wenn Ihr in diesem oder einem ähnlichen DOM-Ereignis viel mehr Berechnungen durchführt.