Helloo
Klassiker bei position: sticky: Es „kommt an“, aber klebt nicht, weil eine der Randbedingungen nicht erfüllt ist. Geh die Punkte kurz durch — einer davon ist es fast immer:
- Ein Vorfahr hat overflow ≠ visible
overflow: auto|scroll|hidden|clip auf irgendeinem Vorfahren macht genau diesen Vorfahren zum Scroll-Container. Wenn dieser Container selbst nicht scrollt (weil er so hoch ist wie sein Inhalt), bewegt sich das Sticky-Element nie.
→ Test: im DevTools-Styles-Pane für alle Vorfahren (Spalte/Row/Frames) temporär overflow: visible setzen. - Falscher Scroll-Container
sticky ist relativ zum nächsten scrollenden Vorfahren (oder der Viewport, wenn keiner scrollt). Wenn z. B. dein Grid/Flex-Wrapper overflow: hidden trägt, klebt das Kind nur innerhalb dieses Wrappers.
→ Fix: Den overflow auf den tatsächlichen Scroll-Container legen (meist body/Viewport) oder bewusst am Spalten-Container scrollen lassen. - :only-child matcht nicht
Dein Selektor > *:only-child greift nur, wenn wirklich genau ein Element-Kind vorhanden ist. Schon ein zusätzliches Wrapper-Div, eine unsichtbare Spacer-CE, ein <script> oder ein zweites Element und das war’s.
→ Test: :only-child kurz entfernen und schauen, ob’s dann klebt. - Transform/Filter/Perspective auf Vorfahren
transform, filter, perspective, backdrop-filter, contain, will-change: transform etc. können neue Containing-Blocks/Stacking-Contexts erzeugen und Sticky aushebeln.
→ Test: temporär abschalten. - Elternhöhe/-positionierung
position: sticky wirkt innerhalb der Box seines direkten Block-Vorfahrens. Wenn dessen Inhalt höher ist als die Seite, sieht es so aus, als ob „nichts passiert“.
→ Prüfe: Klebt es, wenn du bis ans Ende der Spalte scrollst? Wenn nicht: Punkt 1/2. - overflow am Sticky-Element selbst
Du gibst dem sticky Kind max-height + overflow-y: auto. Das ist ok, aber es führt dazu, dass das Element selbst scrollt, während es klebt. Nicht falsch, aber manchmal verwirrend beim Testen. - Z-Index/Überdeckung
Manchmal klebt es, liegt aber unter einem Header.
→ z-index: 1 (oder höher) + background testen. - Layout-Modus
In seltenen Fällen (z. B. display: table-* oder display: contents auf Vorfahren) funktioniert sticky nicht.