Bagaimana cara `position: sticky` bekerja, dan mengapa terkadang ia gagal?

Question

Accepted Answer

`position: sticky` adalah hybrid: sebuah elemen berperilaku seperti `relative` (tetap dalam aliran normal) **hingga** ia bergulir ke ambang batas yang Anda tentukan, kemudian berperilaku seperti `fixed` (melekat di tempat) — tetapi hanya saat **blok yang memuatnya** masih berada di layar.

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

Nilai `top` (atau `bottom`/`left`/`right`) adalah **wajib** — ini menentukan ambang batas. Tanpanya, sticky tidak melakukan apa-apa.

## Cakupan: ia melekat hanya dalam induknya

Sebuah elemen sticky terbatas pada **kontainer induk**-nya. Ia melekat saat bergulir *melalui* induk tersebut, kemudian bergulir pergi setelah bagian bawah induk melewati. Inilah yang membuat "header section yang melekat" berfungsi — setiap header melekat hanya saat bagian itu sendiri berada dalam tampilan.

## Mengapa ini sering "tidak bekerja" — kasus-kasus kegagalan

**1. Sebuah nenek moyang memiliki `overflow: hidden/auto/scroll`.** Ini adalah penyebab nomor 1. Sticky positioning rusak oleh nenek moyang yang dapat digulir apa pun, karena elemen melekat relatif terhadap *kontainer gulir* itu, bukan halaman:

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

**2. Induk tidak cukup tinggi.** Sticky hanya memiliki ruang untuk melekat jika induk lebih tinggi dari elemen sticky — jika induk memiliki tinggi yang sama, tidak ada yang dapat digulir melalui, jadi ia tidak pernah tampak melekat.

**3. Tidak ada ambang batas yang diatur.** Lupa `top`/`bottom` berarti tidak ada titik stick.

**4. Pembatasan tinggi pada induk** (mis. induk flex yang meregangkan item) juga dapat menghilangkan ruang gulir.

## Daftar periksa 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?
```

## Mengapa ini penting

`position: sticky` menggerakkan header yang melekat, header tabel, sidebar, dan UI "scrollspy" tanpa JavaScript.

Tetapi keanehannya — khususnya bahwa `overflow` pada *nenek moyang apa pun* secara diam-diam memutusnya — menjadikannya sumber "mengapa ini tidak melekat?" debugging yang sering terjadi.

Mengetahui cakupan blok yang memuati dan jebakan overflow adalah apa yang memungkinkan Anda menggunakannya secara andal.