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
stickygesetzt. - 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-topgenug Platz unter dem fixierten Header.