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
@layer in CSS: Kaskadenebenen statt !important-Wettrüsten
Irgendwann steht in jedem gewachsenen Stylesheet das erste !important – und ein halbes Jahr später das dreißigste. Mit @layer legst du die Reihenfolge einmal fest, und ab da gewinnt nicht mehr der längste Selektor, sondern die Ebene, die du bestimmt hast.
Tooltips ohne JavaScript – CSS Anchor Positioning
Ein Tooltip an einen Button hängen, der ausweicht, wenn oben kein Platz ist, und nicht am overflow: hidden der Elternbox scheitert – das brauchte jahrelang eine Bibliothek. Seit Firefox 147 kann das jeder große Browser in reinem CSS.
Schöne Zeilenumbrüche in CSS – text-wrap balance und pretty
Eine Überschrift, bei der ein einzelnes Wort einsam in der letzten Zeile hängt, sieht unruhig aus. Mit text-wrap balance und pretty überlässt du dem Browser das saubere Umbrechen – ohne manuelle <br> und ohne JavaScript.