position: sticky egy hibrid: egy elem a relative módon viselkedik (a normál flow-ban marad) amíg egy általad megadott küszöbig nem görgetsz, majd a fixed módon viselkedik (ragadt marad a helyén) — de csak amíg a tartalmazó blokk még látható a képernyőn.
{
: sticky;
: ;
}
A top (vagy bottom/left/right) érték kötelező — ez határozza meg a küszöböt. Nélküle a sticky nem csinál semmit.
Egy sticky elem a szülőkonténerhez korlátozott. Ragadt marad, miközben a szülőn keresztül görgetsz, majd eltűnik, ha a szülő alsó széle elhagyja a képernyőt. Ezért működnek az "erőforrásragasztott fejléc" — minden fejléc csak akkor ragad meg, amíg a saját szekcióját látod.
1. Egy ős overflow: hidden/auto/scroll értékkel rendelkezik. Ez az #1 ok. A sticky pozicionálást bármely gördíthető ős megtöri, mert az elem a saját gördítési konténerhez képest ragad, nem az oldal görgéséhez:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. A szülő nem elég magas. A sticky csak akkor tud ragadni, ha a szülő magasabb, mint a sticky elem — ha a szülő ugyanolyan magasságú, nincs mit görgethetnél, így soha nem tűnik úgy, hogy ragadt marad.
3. Nincs küszöb beállítva. A top/bottom elfelejtése azt jelenti, hogy nincs ragasztási pont.
4. A szülő magasság korlátai (pl. egy flex szülő, amely elemeket nyújt) szintén eltávolíthatják a görgethető helyet.
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
A position: sticky a ragasztott fejléceket, táblázatfejléceket, oldalsávokat és "scrollspy" felhasználói felületeket működtet, anélkül, hogy JavaScriptre lenne szükséged.
De a sajátosságai — különösen az, hogy az overflow bármilyen ősön csendesen megtöri — gyakori forrása a "miért nem ragad meg ez?" hibakeresésnek.
A tartalmazó blokk hatókörének és az overflow csapdának ismerete az, ami lehetővé teszi a megbízható használatát.