Position: sticky ainihi aiki, da me yasa ya kasa wani lokaci?

Question

IT Interview Practice · Accepted Answer

`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.

```css
.section-header {
  position: sticky;
  top: 0;        /* sticks when its top edge reaches the viewport top */
}
```

`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.

## Scope: yana makale kawai a cikin parent

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.

## Me yasa ba ya aiki — lamurren gazawar

**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:

```css
.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.

## Debugging checklist

```text
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
```

## Me yasa ya mahalaci

`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.

Scope: yana makale kawai a cikin parent

Me yasa ba ya aiki — lamurren gazawar

Debugging checklist

Me yasa ya mahalaci

Tambayoyi masu alaƙa