Kako zapravo funkcionira position: sticky i zašto ponekad ne radi?

Question

Accepted Answer

`position: sticky` je hibrid: element se ponaša kao `relative` (ostaje u normalnom toku) **dok se** ne skrolira do praga koji specificirate, tada se ponaša kao `fixed` (ostaje na mjestu) — ali samo dok je njegov **sadržajni blok** još uvijek na zaslonu.

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

Vrijednost `top` (ili `bottom`/`left`/`right`) je **obavezna** — ona definira prag. Bez nje, sticky ništa ne radi.

## Doseg: lijepljenje samo u okviru roditelja

Elementa koji je sticky ograničen je na svoj **nadređeni kontejner**. Lijepi se tijekom skroliranja *kroz* taj nadređeni element, zatim se skrolira van čim donji dio nadređenog elementa prođe. To je ono što čini da "sticky zaglavlja odjeljaka" rade — svako zaglavlje lijepi se samo dok je njegov vlastiti odjeljak vidljiv.

## Zašto često "ne radi" — slučajevi neuspjeha

**1. Neki predak ima `overflow: hidden/auto/scroll`.** Ovo je #1 uzrok. Sticky pozicioniranje prekida se zbog bilo kojeg roditelja koji se može skrolirati, jer se element lijepi u odnosu na *taj* kontejner za skroliranje, ne stranicu:

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

**2. Nadređeni element nije dovoljno velik.** Sticky funkcionira samo ako je nadređeni element viši od sticky elementa — ako je nadređeni element iste visine, nema ništa kroz što bi se skroliralo, pa se nikada ne pojavljuje kao da lijepi.

**3. Nije postavljen prag.** Zaboravljanje `top`/`bottom` znači da nema točke ljepljenja.

**4. Ograničenja visine nadređenog elementa** (npr. flex roditelj koji rasteže stavke) također mogu ukloniti prostor za skroliranje.

## Checklist za otklanjanje grešaka

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

## Zašto je važno

`position: sticky` omogućava ljepljiva zaglavlja, zaglavlja tablica, bočne panele i "scrollspy" korisničke sučelje bez JavaScripta.

Ali njene karakteristike — posebno što `overflow` na *bilo kojem* pretku tiho prekida — čini je čestim izvorom "zašto se ovo ne lijepi?" otklanjanja grešaka.

Znati doseg sadržajnog bloka i zamku s overflow-om je ono što vam omogućava pouzdano korištenje.