Home » Webdesign lernen » Sticky Header erstellen

Sticky Header erstellen – Tutorial

In diesem Tutorial lernst du, wie du mit CSS und JavaScript einen fixierten Header erstellst, der beim Scrollen immer oben am Bildschirm bleibt.

HTML-Struktur für den Header

Das Beispiel-HTML für deinen Header mit Navigation:

<header id="main-header">
  <h1>Meine Webseite</h1>
  <nav>
    <a href="#">Start</a>
    <a href="#">Über uns</a>
    <a href="#">Leistungen</a>
    <a href="#">Kontakt</a>
  </nav>
</header>

<main>
  <p>...dein Seiteninhalt...</p>
</main>

CSS für den Sticky Header

Das CSS sorgt dafür, dass der Header seinen Standard-Stil hat und beim Scrollen „sticky“ wird:

header {
  background-color: #0073aa;
  color: white;
  padding: 15px 30px;
  position: relative;
  transition: top 0.3s;
}

header.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

Wichtig: Der Inhalt muss beim Sticky-Status nach unten weichen, daher mit main { margin-top: 80px; } Platz schaffen.

JavaScript zum Umschalten des Sticky-Klassenstatus

Dieses kleine Skript fügt beim Scrollen die CSS-Klasse sticky zum Header hinzu, sobald vom Seitenanfang 100 Pixel gescrollt wurden:

<script>
window.addEventListener('scroll', function() {
  var header = document.getElementById('main-header');
  if (window.pageYOffset > 100) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }
});
</script>

Schritt-für-Schritt Erklärung

• Der Header hat im Normalzustand die Position relative.
• Beim Scrollen jenseits von 100 Pixel wird per JavaScript die Klasse sticky gesetzt.
• Diese Klasse ändert die Position auf fixed, so bleibt der Header am oberen Rand.
• Ein Schatten (box-shadow) gibt optisches Feedback.
• Der Hauptinhalt bekommt über margin-top genug Platz unter dem fixierten Header.