Daftar panjang yang terpecah menjadi beberapa kelompok punya masalah klasik: begitu pengguna menggulir melewati judul kelompok, judul itu tergelincir keluar layar dan pembaca kehilangan konteks. position: sticky menyelesaikannya dengan elegan — elemen berperilaku seperti biasa di alur, lalu menempel pada tepi area scroll ketika ambang yang kita tentukan tercapai. Nilai ini adalah hybrid antara relative dan fixed, dengan tiga syarat yang wajib dipenuhi agar benar-benar bekerja.
Hybrid: Alur Dulu, Tempel Kemudian #
Sebelum ambang scroll tercapai, elemen sticky berperilaku persis seperti elemen normal: slotnya dipertahankan di alur, elemen lain mengalir di sekitarnya, dan offset belum berpengaruh. Begitu posisi scroll melewati ambang, elemen “mendarat” di nilai offset tersebut dan menempel di sana — seperti fixed, tetapi hanya dalam lingkup area scroll yang memuatnya.
Tiga sifat hasil perpaduan itu:
- Ruang alur tetap dipertahankan — berbeda dari fixed dan absolute, kehadiran elemen sticky tetap dihitung layout.
- Penempelan terjadi pada tepi scrolling ancestor — panel dengan
overflow: auto/scroll, atau dokumen itu sendiri. - Penempelan berhenti di batas induk — elemen sticky tidak pernah keluar dari kotak parent-nya; saat induknya habis tergulir, elemen ikut terdorong keluar. Inilah pembeda utamanya dari fixed.
Tiga Syarat yang Wajib #
| Syarat | Gejala bila hilang |
|---|---|
Minimal satu offset diset (umumnya top: 0) | Elemen tidak pernah menempel; sticky tanpa offset tidak melakukan apa pun |
| Ada ancestor yang bisa di-scroll | Tidak ada gerakan scroll untuk memicu penempelan |
| Induk lebih tinggi dari elemen | Menempel sesaat lalu langsung terdorong keluar bersama induknya |
.judul-grup {
position: sticky;
top: 0;
background-color: #14503a;
color: #ffffff;
}Mari kita telaah:
position: sticky: menandai elemen sebagai kandidat penempel.top: 0: ambangnya — elemen menempel ketika tepi atasnya menyentuh tepi atas area scroll. Tanpa baris ini, seluruh mekanisme tidak jalan.background-coloryang solid: elemen yang mengalir di belakangnya akan tertutup rapi; tanpa latar, konten terlihat “menembus” header.
Panel dengan overflow: auto memuat tiga kelompok menu; setiap judul kelompok sticky dengan top: 0:
Setiap header hanya berkuasa di dalam induknya — batas induk yang menjadi ciri sticky.
Pola: Baris Kepala Tabel yang Menempel #
Versi tabel dari pola ini menempel pada <thead>:
.panel-tabel {
height: 280px;
overflow: auto; /* menjadikan panel sebagai scrolling ancestor */
}
thead th {
position: sticky;
top: 0;
background-color: #14503a;
color: #ffffff;
}Sticky pada Halaman Utuh #
Panel scroll bukan satu-satunya panggung sticky. Bila tidak ada ancestor yang bisa di-scroll, area scroll terdekatnya adalah dokumen itu sendiri — artinya elemen sticky menempel terhadap jendela browser. Pola umumnya adalah menu samping pada halaman artikel: elemen tetap di alurnya, lalu menempel di top: 16px sepanjang pembaca menggulir artikel, dan terdorong keluar bersama kontainernya di akhir halaman. Syarat yang sama tetap berlaku: rantai induknya harus cukup tinggi, dan tidak boleh ada ancestor dengan overflow selain visible yang mengambil peran scrolling ancestor.
Satu catatan tambahan: karena sticky termasuk elemen positioned, header tempel ini boleh diberi z-index agar tetap tampil di atas gambar atau elemen lain yang lewat di bawahnya.
Kesalahan Umum #
| Gejala | Penyebab | Perbaikan |
|---|---|---|
| Elemen tidak pernah menempel sama sekali | Tidak ada offset yang diset | Tambahkan top: 0 (atau nilai lain sesuai arah) |
| Konten terlihat menembus header saat lewat | Latar header transparan | Beri background-color solid pada header |
| Sticky tidak berjalan meski ada offset | Ancestor di antaranya dengan overflow selain visible menjadi scrolling ancestor terdekat | Pastikan wadah yang di-scroll memang ancestor scroll terdekatnya |
| Header hanya menempel sesaat | Induknya terlalu pendek | Perbesar isi induk, atau pecah kelompoknya |
Ringkasan #
Sticky adalah hybrid yang bekerja dalam tiga babak: mengalir di alur dengan ruangnya dipertahankan, menempel pada offset ketika ambang scroll terlewati, dan berhenti tepat di batas induknya. Tiga syaratnya — offset, scrolling ancestor, dan induk yang cukup tinggi — menjelaskan hampir semua keluhan “sticky tidak jalan”. Berikutnya kita rapikan perkakas yang selama ini ditulis empat kali: top, right, bottom, dan left kini punya shorthand bernama inset.