Header yang tetap terlihat ketika halaman digulir membuat navigasi selalu berada dalam jangkauan satu klik. Fitur ini nyaris jadi kewajiban pada website konten modern, dan bahannya sudah lengkap di tangan kita: position: sticky dari section Positioning, plus latar semi transparan dan pemisah halus agar header tidak menyatu dengan konten yang lewat. Pada chapter ini kita merakit pola lengkapnya sekaligus menjaga tumpukan lapisannya tetap tertib.
Tiga Deklarasi Inti #
.header-lengket {
position: sticky;
top: 0;
z-index: 10;
}Recap singkat mekanismenya dari chapter Sticky Positioning: elemen sticky menempel relatif ke nearest scrolling ancestor — biasanya jendela browser — dan butuh minimal satu nilai top untuk menentukan titik tempelnya. Elemen tetap menduduki alur layout normalnya, jadi berbeda dengan position: fixed, tidak ada ruang yang tertinggal kosong dan tidak ada penyesuaian khusus pada konten halaman.
Nilai z-index: 10 memastikan header berada di atas konten yang lewat. Angkanya sengaja kecil: tumpukan lapisan yang tertib memakai nilai kecil terdokumentasi, bukan angka raksasa yang menyulitkan debugging — kebiasaan yang kita tanam sejak chapter Z-Index.
Latar, Pemisah, dan Efek Blur #
Header yang menempel membutuhkan identitas visual agar tidak menyatu dengan konten di bawahnya:
.header-lengket {
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
border-bottom: 1px solid #e5e7eb;
}Tiga deklarasi, tiga peran. Latar rgba dengan opasitas 0.85 memberi dasar yang tetap membiarkan konten terlihat samar. backdrop-filter: blur(8px) mengaburkan apa pun di belakang header — efek kaca yang didukung seluruh browser modern; pada browser lama yang tidak mendukungnya, latar 0.85 tetap bekerja sebagai fallback yang layak. Dan border-bottom memberi pemisah yang jelas, terutama ketika konten yang lewat berwarna serupa dengan header.
Gulir Halaman dan Tautan Anchor #
Karena sticky menduduki alur normal, menggulir halaman tidak terganggu sama sekali. Satu konsekuensi kecil perlu diantisipasi: tautan # yang melompat ke sebuah section akan mendarat di belakang header yang menempel. Property scroll-margin-top menyelesaikannya:
.section-isi {
scroll-margin-top: 72px;
}Nilai 72 piksel kira-kira setinggi header; sesuaikan dengan tinggi header milikmu sendiri. Tanpa property ini, judul section yang menjadi target lompatan tertutup header dan halaman tampak “berhenti di tempat yang salah”.
Demo berikut memakai panel tinggi dengan gulir sendiri agar efeknya terlihat langsung. Gulir isinya dan perhatikan header yang tetap di atas, lalu klik tautan “Sangrai” untuk melihat scroll-margin-top menyisakan ruang di bawah header:
Kesalahan Umum #
| Kesalahan | Akibatnya | Perbaikannya |
|---|---|---|
sticky tanpa nilai top | Header tidak pernah menempel; berperilaku seperti relative biasa | Selalu tulis top: 0 atau nilai lain |
Induk memakai overflow: hidden | Header menempel ke induk itu, bukan ke halaman; sticky tampak mati | Hindari overflow pada induk antara header dan container gulir |
| Latar header transparan tanpa pemisah | Konten lewat menyatu dengan menu sehingga sulit dibaca | Pasangkan latar semi transparan dengan border-bottom atau bayangan |
z-index angka raksasa | Tumpukan lapisan sulit dilacak saat bertabrakan dengan modal | Gunakan nilai kecil terdokumentasi, misalnya 10 |
Ringkasan #
Sticky navigation adalah pola tiga lapis: position: sticky dengan top untuk menempel, latar semi transparan plus backdrop-filter untuk keterbacaan di atas konten, dan border-bottom sebagai pemisah. z-index kecil menjaga tumpukan tetap tertib, dan scroll-margin-top merawat tautan anchor. Berikutnya kita menggabungkan hampir semua pola yang sudah kita rakit menjadi kerangka aplikasi utuh: layout dashboard.