position: sticky is een hybride: een element gedraagt zich als relative (blijft in normale flow) totdat het naar een drempel scrolt die je aangeeft, dan gedraagt het zich als fixed (blijft op zijn plaats) — maar alleen terwijl zijn containing block nog op het scherm zichtbaar is.
.section-header {
position: sticky;
top: 0; /* sticks when its top edge reaches the viewport top */
}
De top (of bottom/left/right) waarde is verplicht — deze bepaalt de drempel. Zonder deze waarde doet sticky niets.
Een sticky element is beperkt tot zijn parent container. Het sticks terwijl je door die parent scrolt, en scrolt weg zodra de onderkant van de parent het scherm verlaat. Dit is wat "sticky section headers" mogelijk maakt — elke header sticks alleen terwijl zijn eigen sectie in beeld is.
1. Een ancestor heeft overflow: hidden/auto/scroll. Dit is de #1 oorzaak. Sticky positioning wordt verbroken door elke scrollbare ancestor, omdat het element sticks relatief tot die scroll container, niet de pagina:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. De parent is niet hoog genoeg. Sticky werkt alleen als de parent hoger is dan het sticky element — als de parent even hoog is, is er niets om doorheen te scrollen, dus het lijkt nooit te sticks.
3. Geen drempel ingesteld. Het vergeten van top/bottom betekent geen stick point.
4. Hoogtebeperkingen op de parent (bijv. een flex parent die items uitrekt) kunnen ook de scrollruimte verwijderen.
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
position: sticky maakt sticky headers, tabelheaders, zijbalken en "scrollspy" UI's mogelijk zonder JavaScript.
Maar de eigenaardigheid — vooral dat een overflow op welke ancestor dan ook het stiekem breekt — maakt het een veelvoorkomende bron van "waarom sticks dit niet?" debugging.
Als je het containing-block bereik en de overflow-val kent, kun je het betrouwbaar gebruiken.