Sticky Header umsetzen: Eine Anleitung für deine eigene Website

23.09.2026

Einleitung

Ein Sticky Header ist ein Webdesign-Element, das beim Scrollen einer Seite an einer festen Position bleibt. Diese Funktion verbessert die Benutzerfreundlichkeit, indem sie wichtige Navigationselemente jederzeit zugänglich macht. In diesem Artikel erkläre ich, wie du einen Sticky Header mit HTML, CSS und JavaScript umsetzen kannst.

Warum ein Sticky Header?

Ein Sticky Header bietet zahlreiche Vorteile. Er verbessert die Navigation auf deiner Website und erhöht die Zugänglichkeit von Menüpunkten. Besonders auf längeren Seiten bleibt der Benutzer immer mit der Top-Navigation in Verbindung. Dies kann die Verweildauer und die Bedienfreundlichkeit erheblich steigern.

Grundlagen: HTML-Struktur

Der erste Schritt bei der Implementierung eines Sticky Headers ist die Erstellung der grundlegenden HTML-Struktur. Hier ist ein einfaches Beispiel:

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Über uns</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </nav>
</header>

Das Styling mit CSS

Um den Header "sticky" zu machen, verwenden wir CSS. Der Schlüssel liegt in der Eigenschaft position: sticky;. Hier ist ein einfaches CSS-Beispiel:

header {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1000;
  width: 100%;
}

nav ul {
  display: flex;
  list-style-type: none;
}

nav ul li {
  margin-right: 20px;
}

Mit diesen CSS-Regeln bleibt der Header oben auf der Seite kleben, sobald der Benutzer nach unten scrollt.

Ergänzende JavaScript-Funktionalität

Manchmal reicht CSS allein nicht aus, besonders wenn du zusätzliche Funktionen wie das Hinzufügen einer Schattenlinie beim Scrollen möchtest. Hier kommt JavaScript ins Spiel:

window.addEventListener('scroll', function() {
  const header = document.querySelector('header');
  if (window.scrollY > 0) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

Zusätzliches CSS für den gescrollten Zustand:

header.scrolled {
  box-shadow: 0 4px 2px -2px gray;
}

Fazit

Die Implementierung eines Sticky Headers ist eine effektive Methode, um die Benutzerfreundlichkeit deiner Website zu verbessern. Mit HTML, CSS und ein wenig JavaScript kannst du einen Header erstellen, der sowohl funktional als auch stilvoll ist. Probiere es auf deiner eigenen Website aus und erlebe den Unterschied!