position: sticky je hibrid: element se obnaša kot relative (ostane v normalnem toku) dokler se ne pomakne do praga, ki ga določite, nato pa se obnaša kot fixed (se prilepi na mesto) — vendar le medtem ko je njegov vsebniški blok še viden na zaslonu.
{
: sticky;
: ;
}
Vrednost top (ali bottom/left/right) je obvezna — določa prag. Brez nje sticky ne naredi ničesar.
Element s sticky pozicioniranjem je omejen na svoj nadrejeni vsebnik. Se prilepi, medtem ko se premika skozi ta starš, nato pa se pomakne stran, ko spodnji rob starša zapusti vidni del. To je ono, kar omogoča "lepljive naslove sekcij" — vsak naslov se prilepi samo medtem ko je njegova sekcija vidna.
1. Prednik ima overflow: hidden/auto/scroll. To je glavni razlog. Sticky pozicioniranje je porinjeno s strani katerega koli premičnega prnika, ker se element prilepi glede na ta premični prnik, ne pa na stran:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. Starš ni dovolj visok. Sticky ima prostor za lepljenje samo, če je starš višji od elementa s sticky pozicioniranjem — če je starš enake višine, ni ničesar za premikanje skozi njega, zato se nikoli ne zdi, da se prilepi.
3. Ni nastavljenega praga. Pozabljanje top/bottom pomeni nobeno točko lepljenja.
4. Omejitve višine starša (npr. starš flex, ki razteguje predmete) lahko tudi odstranijo prostor za premikanje.
✓ 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 omogoča lepljive naslove, naslove tabel, stranske vrstice in "scrollspy" uporabniške vmesnike brez JavaScripta.
Ampak njegove posebnosti — zlasti da overflow na katerem koli predniku tiho prepreči delovanje — ga pogosto naredijo vir razhroščevanja "zakaj se to ne prilepi?".
Pojmovanje obsega vsebinskega bloka in pasti overflow je tisto, kar te pusti, da ga zanesljivo uporabljaš.