position: sticky hija ibrida: element iseħħ relative (jibqa' fil-fluss normali) sas meta isgarrab sa hemm li inti tispeċifika, imbagħad iseħħ fixed (jibqa' mistaċċ) — iżda biss meta l-blokk tal-kontenitur tiegħu ikun għad fuq l-iskrin.
{
: sticky;
: ;
}
Il-valur top (jew bottom/left/right) huwa meħtieġ — jiddefinisx il-hemm. Mingħajra, sticky ma taħdimx.
Element sticky huwa maqsuma għall-kontenitur ġenitur tagħha. Tibqa' mistaċċa waqt li tgarrab permezz ta' dak il-ġenitur, imbagħad tgarrab ħmieġ waqt li l-qiegħ tal-ġenitur jgħaddi. Dan hu li jagħmel "sticky section headers" jaħdmu — kull header jibqa' mistaċċ biss waqt li s-sezzjoni tagħha stess tkun vizibbli.
1. Antenatu għandu overflow: hidden/auto/scroll. Dan huwa l-kawża #1. Il-positioning sticky huwa miksur mill-kwalunkwe antenatu li jista' jitgarrab, għax element jibqa' mistaċċ relativ għal dak il-kontenitur tal-scroll, mhux il-paġna:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. Il-ġenitur mhuwiex għoli biżżejjed. Sticky taħdem biss jekk il-ġenitur ikun aktar għoli mill-element sticky — jekk il-ġenitur għandu l-istess għoli, m'hemm x'jigħarrab, allura qatt ma jidher mistaċċ.
3. Hemm mhuwiex issettjat. Insija top/bottom tfisser ebda punt ta' sticky.
4. Restrizzjonijiet ta' għoli fuq il-ġenitur (eż. ġenitur flex li jestendi items) jistgħu wkoll iħassru l-ispazju tal-scroll.
✓ 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 jgħaddi sticky headers, table headers, sidebars, u UI "scrollspy" mingħajr JavaScript.
Iżda l-eccentricitajiet tagħha — speċjalment li overflow fuq kwalunkwe antenatu tistfittxita' silenzjosament — tagħmlilha sors frequent ta' "għaliex dan mhuwiex mistaċċ?" debugging.
Il-għarfien tal-ambitu tal-blokk tal-kontenitur u l-ħabta tal-overflow huwa dak li jippermettilek tużaha b'mod affidabbli.