position: sticky – ein Header, der beim Scrollen oben kleben bleibt
Für einen mitfahrenden Header brauchst du kein JavaScript. Zwei CSS-Zeilen genügen mit position: sticky. Ich zeige das Muster, erkläre die eine Voraussetzung, die oft vergessen wird, und den häufigsten Grund, warum es „nicht klebt".
Ein Header oder eine Filterleiste, die beim Scrollen oben kleben bleibt, wirkt hochwertig – und braucht kein JavaScript. position: sticky erledigt das in zwei Zeilen.
Das Grundmuster
header {
position: sticky;
top: 0; /* ab hier klebt es am oberen Rand */
background: #fff; /* wichtig, sonst scheint Inhalt durch */
z-index: 10; /* liegt über dem restlichen Inhalt */
}Das Element scrollt zunächst normal mit – sobald es den Abstand top: 0 erreicht, bleibt es kleben. Du musst einen Wert für top (oder bottom, left, right) setzen, sonst passiert nichts.
Warum es oft „nicht klebt"
Der mit Abstand häufigste Grund: Ein Elternelement hat overflow: hidden oder overflow: auto. Sticky funktioniert nur innerhalb des nächsten scrollenden Vorfahren – schneidet ein Elternteil den Overflow ab, ist das Kleben sofort vorbei.
Prüf also: Hat einer der Container über deinem Sticky-Element ein overflow gesetzt? Das ist zu 90 % die Ursache.
Ein praktisches Detail
Ein sticky Element bleibt in seinem Eltern-Container. Verlässt der Container den Bildschirm, scrollt auch das sticky Element mit hinaus. Das ist praktisch für Abschnitts-Überschriften:
.abschnitt-titel {
position: sticky;
top: 0;
}Jede Überschrift klebt oben, solange ihr Abschnitt sichtbar ist, und wird dann von der nächsten „weggeschoben" – wie in vielen Kontaktlisten.
position: sticky spart mir jedes Mal ein Stück JavaScript. Mehr HTML- & CSS-Snippets findest du auf code.bymw.de.
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
Container Queries – Komponenten, die auf ihren Platz reagieren, nicht auf den Bildschirm
Media Queries fragen die Bildschirmbreite ab. Container Queries fragen, wie breit der Container einer Komponente gerade ist – so passt sich eine Karte in der Sidebar anders an als dieselbe Karte im Hauptbereich. Endlich wirklich wiederverwendbare Bausteine.
Sanfte Übergänge in CSS – Hover-Effekte mit transition statt harter Sprünge
Ein guter Hover-Effekt springt nicht, er gleitet. Mit transition animierst du Farbe, Größe und Schatten weich – in einer Zeile. Ich zeige das Muster, warum du niemals transition: all nimmst und wie du Nutzer mit Bewegungsempfindlichkeit respektierst.
CSS-Variablen und Dark Mode – ein Theme, das sich selbst umschaltet
Mit CSS Custom Properties definierst du Farben an einer Stelle und nutzt sie überall. Der Clou: Für den Dark Mode überschreibst du nur die Variablen – nicht jede einzelne Regel. Ich zeige beides, inklusive automatischer System-Erkennung.