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.
Quellen
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
Ankerlinks unter einem klebenden Header – scroll-margin-top rettet die Überschrift
Du klickst im Inhaltsverzeichnis auf einen Abschnitt – und der klebende Header verdeckt genau die Überschrift, zu der du wolltest. Zwei CSS-Zeilen lösen das, ganz ohne JavaScript und ohne unsichtbare Platzhalter-Elemente.
:is() und :where() – kürzere Selektoren, und einer davon wiegt nichts
Drei fast gleiche Selektoren untereinander, nur weil die Überschrift mal h2 und mal h3 heißt? :is() fasst das zusammen. Und :where() macht dasselbe, ohne die Spezifität hochzutreiben – der Unterschied ist der ganze Trick.
content-visibility – lange Seiten rendern, ohne dass der Browser alles auf einmal baut
Bei sehr langen Seiten rechnet der Browser Layout und Malen für jeden Abschnitt – auch für die, die 8.000 Pixel weiter unten liegen. Eine CSS-Eigenschaft verschiebt diese Arbeit auf den Moment, in dem sie gebraucht wird.