← CSS13 / 62

position: sticky

sticky adalah hibrida: elemen berperilaku normal sampai batas scroll tertentu, lalu 'menempel'. Wajib menyertakan nilai offset (top: 0) — tanpa itu sticky tidak melakukan apa pun, dan ini kebingungan yang sangat sering terjadi. Dipakai untuk header navigasi dan header tabel. Penyebab kedua sticky gagal adalah salah satu elemen induknya memakai overflow: hidden atau overflow: auto, karena itu memutus konteks scroll yang dibutuhkan sticky.

👀 Contoh dulu

.judul-tabel {
  position: sticky;
  top: 0;          /* ← WAJIB, ini titik menempelnya */
  background: white;
}

Hasilnya: Saat di-scroll, elemen ikut naik sampai menyentuh tepi atas, lalu berhenti dan menempel di sana.

💡 Beri background solid — tanpa itu, konten yang lewat di belakangnya akan terlihat menembus.

📝 Sekarang giliranmu

Buat .header menempel di atas saat di-scroll: position: sticky dan top: 0.

Preview
← SebelumnyaBerikutnya →