Webdesign lernen JavaScript · CSS

Sticky Header erstellen.

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

Von Eduard Wischnewski, Webdesigner · aktualisiert am 29.10.2026

HTML-Struktur für den Header

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

html

<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>

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

css

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:

html

<script>
window.addEventListener('scroll', function() {
  var header = document.getElementById('main-header');
  if (window.scrollY > 100) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }
}, { passive: true });
</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.

Brauchst du keinen Effekt ab einer bestimmten Scrollhöhe, reicht eine einzige CSS-Regel – ganz ohne JavaScript und ohne Platzhalter, weil der Header im normalen Dokumentfluss bleibt:

css

header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #0073aa;
}

Achtung: position: sticky funktioniert nicht, wenn ein Elternelement overflow: hidden oder overflow: auto hat. In dem Fall greift die JavaScript-Variante oben.

Fazit

Ein Sticky Header verbessert die Bedienung und sorgt dafür, dass Navigation und wichtige Elemente immer erreichbar bleiben. Wenn du das Scroll-Erlebnis weiter optimieren möchtest, schau dir auch den Back to Top Button, den Back to Top Button Generator und mein Tutorial Theme umschalten an.

Weiterlernen

Ergänze den Sticky Header um einen Back to Top Button oder nutze den Back to Top Button Generator für WordPress. Die Navigation im Header richtest du mit CSS Flexbox aus, und mit Keyframe-Animationen bekommt der Wechsel einen sanften Effekt. Ein Video im Header macht den Seitenkopf zum Hingucker.

Du möchtest eine moderne Navigation für deine Seite? Ich setze sie im Webdesign um.

FAQ: Sticky Header

position:sticky, Performance, Mobilgeräte und Barrierefreiheit

Was ist ein Sticky Header und worin liegt der Unterschied zu position: fixed?

Ein Sticky Header bleibt beim Scrollen sichtbar – je nach Umsetzung dauerhaft fixiert (position: fixed) oder er „klebt“ erst ab einem bestimmten Scroll-Punkt. CSS position: sticky ist eine native Lösung, bei der das Element zuerst normal im Fluss liegt und ab einer definierten Position kleben bleibt; position: fixed nimmt das Element aus dem Dokumentfluss und fixiert es immer am Viewport. position: sticky ist oft einfacher und braucht kein JavaScript, funktioniert aber nur innerhalb seines Eltern-Containers.

Wann sollte ich CSS position: sticky statt JavaScript verwenden?

Verwende position: sticky, wenn du eine einfache, performante Lösung ohne Scroll-Listener willst. Nutze JavaScript mit Klassenwechsel, wenn du komplexere Effekte brauchst – etwa Ein- und Ausblenden beim Scrollen, Animationen, Schwellenwerte oder eine veränderte Header-Höhe.

Wie verhindere ich, dass der Sticky Header den Seiteninhalt überdeckt?

Wechselt der Header auf fixed, verlässt er den normalen Fluss und der Inhalt springt nach oben. Schaffe Platz, indem du beim Sticky-Status z. B. main { margin-top } in Höhe des Headers setzt oder ein Platzhalter-Element mit gleicher Höhe einfügst. Bei dynamischer Header-Höhe misst du die Höhe per JavaScript und aktualisierst den Platzhalter.

Wie optimiere ich die Performance beim Scroll-Handling?

Vermeide teure Operationen im Scroll-Event. Nutze passive Listener, requestAnimationFrame oder Throttling, um DOM-Änderungen zu bündeln. Am besten nur eine Klasse umschalten und keine Layout-Messungen pro Frame durchführen. Wenn möglich, setze auf position: sticky und spar dir den Scroll-Listener ganz.

Wie gehe ich mit mobilen Geräten und kleinem Viewport um?

Auf Mobilgeräten ist der Platz begrenzt: Reduziere die Header-Höhe, nutze eine kompakte Navigation (Hamburger-Menü) und ausreichend große Touch-Ziele. Viele Seiten zeigen den Sticky Header nur beim Scrollen nach oben und blenden ihn beim Scrollen nach unten aus. Teste außerdem das Zusammenspiel mit der Bildschirmtastatur und der Browser-Leiste (iOS Safari).

Wie setze ich einen Header um, der beim Runterscrollen verschwindet und beim Hochscrollen erscheint?

Dafür brauchst du JavaScript: Merke dir die letzte Scroll-Position und vergleiche sie mit der aktuellen. Beim Scrollen nach unten setzt du z. B. header.classList.add('hidden'), beim Scrollen nach oben entfernst du die Klasse wieder. Für eine flüssige Animation nutzt du transform: translateY(-100%) mit einer CSS-Transition statt top zu verändern.

Welche z-index-Probleme können auftreten und wie löse ich sie?

Ein zu niedriger z-index lässt andere Elemente über dem Header erscheinen, ein zu hoher überdeckt Modals oder Dropdowns. Lege eine klare Reihenfolge fest (z. B. Header 1000, Modals 2000) und vermeide willkürliche Riesenwerte. Beachte, dass z-index nur innerhalb des jeweiligen Stacking-Contexts wirkt.

Wie mache ich die Navigation in einem Sticky Header barrierefrei?

Wichtig sind sichtbare Fokuszustände, große Touch-Ziele, semantisches Markup (nav, ul, li, a), ein korrektes aria-label für den Menü-Button und Bedienbarkeit per Tastatur. Wird der Header dynamisch ein- und ausgeblendet, sollte das für assistive Technologien nachvollziehbar sein. Teste mit Tastatur und Screenreader.

Wie integriere ich einen Sticky Header in WordPress-Themes und Page Builder?

Lege das Markup als Template Part an (z. B. in header.php) und lade CSS und JavaScript über wp_enqueue_style und wp_enqueue_script. Bei Page Buildern wie Elementor kannst du die eingebauten Sticky-Optionen nutzen. Achte auf Konflikte mit anderen Sticky-Skripten von Plugins und teste auf verschiedenen Seiten.

Welche Best Practices und typischen Fehler gibt es?

Best Practices: mobilfreundliches Design, keine zu hohen Header, flüssige Animationen per transform, Header-Höhe bei Bedarf dynamisch messen, keine unnötigen Scroll-Listener, saubere z-index-Strategie und Tests in allen Browsern. Häufige Fehler: fehlender Platz für den Inhalt, schwerer JavaScript-Code im Scroll-Handler, vergessenes Einbinden in WordPress und fehlende Barrierefreiheit.

Passt dazu Weitere Tutorials

Weiter lernen.

Back to Top Button Scroll-to-Top-Button mit reinem JavaScript oder jQuery bauen – inklusive HTML und CSS. Zum Tutorial → Back to Top Button Generator Eigenen Scroll-Button für WordPress konfigurieren, anpassen und als Plugin laden. Zum Tutorial → Theme umschalten Zwischen Hell- und Dunkel-Theme umschalten – Beispiel-Code für Button, Styles und Skript. Zum Tutorial →

Keine Zeit, es selbst umzusetzen? Ich baue Ihre Webseite schnell und sauber.

Jetzt kontaktieren