Si funksionon në të vërtetë position: sticky, dhe pse ndonjëherë dështon?

Question

Accepted Answer

`position: sticky` është një hibrid: një element sillet si `relative` (qëndron në rrjedhën normale) **derisa** të rrëshqasë në një prag që ju specifikoni, pastaj sillet si `fixed` (mbetet në vend) — por vetëm ndërsa **blloku i tij përmbajtës** është ende në ekran.

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

Vlera `top` (ose `bottom`/`left`/`right`) është **e nevojshme** — ajo përcakton pragun. Pa të, sticky nuk bën asgjë.

## Shtrirja: ai ngjitet vetëm brenda prindërit të tij

Një element sticky është i kufizuar në **kontejnerin prind**. Ai ngjitet ndërsa rrëshqet *përmes* atij prindi, pastaj rrëshqet larg pasi fundi i prindërit kalon. Kjo është ajo që bën që "titujt e seksioneve ngjitur" të funksionojnë — secili titull ngjitet vetëm ndërsa seksioni i tij është në pamje.

## Pse zakonisht "nuk funksionon" — rastet e dështimit

**1. Një paraardhës ka `overflow: hidden/auto/scroll`.** Kjo është shkaku #1. Pozicionimi sticky këputet nga çdo paraardhës i rrëshqitshëm, sepse elementi ngjitet në lidhje me *atë* kontejner rrëshqitjeje, jo faqen:

```css
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
```

**2. Prindi nuk është mjaft i lartë.** Sticky ka hapësirë për të ngjitje vetëm nëse prindi është më i lartë se elementi sticky — nëse prindi është i njëjtës lartësi, nuk ka asgjë për të rrëshqitur përmes, kështu që nuk duket se ngjitet kurrë.

**3. Nuk është vendosur prag.** Harresa e `top`/`bottom` do të thotë nuk ka pikë ngjitjeje.

**4. Kufizime të lartësisë në prind** (p.sh. një prind flex që shtrin artikujt) mund gjithashtu të hiqet hapësira e rrëshqitjes.

## Lista de kontrollimi për debugging

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

## Pse është e rëndësishme

`position: sticky` mundëson titujt sticky, titujt e tabelës, anësoret, dhe "scrollspy" UI-të pa JavaScript.

Megjithatë, kufizimet e tij — veçanërisht që një `overflow` në *çdo* paraardhës e thyp atë në heshtje — e bëjnë atë një burim të shpeshtë i "përse nuk ngjitet kjo?" debugging.

Njohja e shtrirjes së bllokut përmbajtës dhe kurth overflow është ajo që ju lejon ta përdorni atë në mënyrë të besueshme.