position: sticky adalah hibrid: elemen berperilaku seperti relative (tetap dalam aliran normal) hingga ia bergulir ke ambang yang Anda tentukan, kemudian berperilaku seperti fixed (menempel di tempat) — tetapi hanya sementara blok pemuatnya masih di layar.
{
: sticky;
: ;
}
Nilai top (atau bottom/left/right) diperlukan — mendefinisikan ambang batas. Tanpanya, sticky tidak melakukan apa-apa.
Elemen sticky terbatas pada kontainer induknya. Ia menempel saat bergulir melalui induk tersebut, kemudian bergulir pergi setelah bagian bawah induk berlalu. Ini adalah yang membuat "judul bagian lengket" berfungsi — setiap judul menempel hanya saat bagiannya sendiri terlihat.
1. Nenek moyang memiliki overflow: hidden/auto/scroll. Ini adalah penyebab #1. Pemosisian sticky rusak oleh nenek moyang yang dapat digulir apa pun, karena elemen menempel relatif terhadap wadah scroll itu, bukan halaman:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. Induk tidak cukup tinggi. Sticky hanya berfungsi jika induk lebih tinggi dari elemen sticky — jika induk memiliki tinggi yang sama, tidak ada yang dapat digulir, jadi tidak akan pernah terlihat menempel.
3. Tidak ada ambang batas yang ditetapkan. Lupa top/bottom berarti tidak ada titik penempatan.
4. Batasan ketinggian pada induk (misalnya induk flex yang meregangkan item) juga dapat menghilangkan ruang gulir.
✓ 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 mendukung judul lengket, judul tabel, bilah samping, dan UI "scrollspy" tanpa JavaScript.
Tetapi keunikan-keunikannya — terutama bahwa overflow pada nenek moyang apa pun secara diam-diam memutusnya — membuatnya menjadi sumber sering dari debugging "mengapa ini tidak menempel?".
Mengetahui ruang lingkup blok pemuatan dan jebakan overflow adalah apa yang memungkinkan Anda menggunakannya secara andal.