position: sticky gida ne: element yana aiki kamar relative (ya zauna a normal flow) har ya gundura zuwa mataki da ka ayyana, sannan ya aiki kamar fixed (ya makale a wuri) — amma ne kawai yayin da block mai ajiye shi ya kasance a gida.
{
: sticky;
: ;
}
top (ko bottom/left/right) ƙimayyar wajibi ce — ita ce da ke bayyana mataki. Ba tare da ita ba, sticky ba zai yi komai ba.
Element mai sticky ana iyakance ga parent container nashi. Yana makale yayin scroll *ta" parent, sannan ya scroll waje da zayin bottom na parent ya wuce. Wannan ne da ke sa "sticky section headers" aiki — kowane header yana makale kawai yayin da kanta section ta kasance a gida.
1. Ujami yana da overflow: hidden/auto/scroll. Wannan shine babbar dalili. Sticky positioning ana kaida ta scroll ancestor kila, saboda element yana makale dangane da wancan scroll container, ba shafi ba:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. Parent ba ya ishe sosai. Sticky yana buƙatar room ne don makale idan parent ya fi sticky element tsayi — idan parent daidai tsayi ne, babu komai don scroll ta, don haka ba ya taɓa nunawa kamar akwai makale.
3. Babu threshold da aka saita. Malimartar top/bottom yana nufin babu stick point.
4. Height constraints akan parent (misali flex parent yana taye items) kuma yana iya kawar da scroll room.
✓ 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 yana buƙatar sticky headers, table headers, sidebars, da "scrollspy" UIs ba tare da JavaScript ba.
Ammā ita quirks nita — musamman cewa overflow akan kila ancestor yana yaudara shi — yasa ya zama tushe mai nuni na "me yasa wannan ba ya makale?" debugging.
Sanin containing-block scope da overflow trap shine abin da ke bai kuwancin yin amfani da shi aiki-aiki.