Sticky Header

Header yang menempel di atas layar membuat navigasi selalu terjangkau: pengguna tidak perlu menggulir kembali ke puncak halaman hanya untuk pindah halaman. Teknik yang tepat untuk kebutuhan ini adalah position: sticky — bukan fixed — karena header tetap menjadi bagian alur dokumen. Kita lengkapi resepnya dengan latar semi transparan dan backdrop-filter, sehingga konten yang lewat di balik header tampil kabur seperti kaca buram.

Resep Header Sticky #

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(255 255 255 / 80%);
  backdrop-filter: blur(8px);
}

HTML pendampingnya adalah header biasa dengan beberapa tautan navigasi, diikuti konten panjang:

<header class="topbar">
  <strong>Toko Rasa</strong>
  <nav>
    <a href="#">Beranda</a>
    <a href="#">Produk</a>
    <a href="#">Kontak</a>
  </nav>
</header>
<main>
  <!-- banyak section sehingga halaman dapat digulir -->
</main>

Hasil di Browser:

Header .topbar membawa computed position: sticky dengan top: 0px
dan z-index: 10 — menempel tepat di tepi atas viewport dan berada
di atas konten yang bergulir melewatinya. backdrop-filter terhitung
"blur(8px)" sehingga konten di balik latar putih 80% opasitas tampak
kabur seperti kaca.

Mari kita telaah lima deklarasi resep tersebut:

1. position: sticky; top: 0: elemen mengalir seperti biasa sampai posisi gulir melewati ambang top, lalu menempel. Tanpa top (atau inset lainnya), penempelan tidak pernah aktif (lihat sticky-positioning ).
2. z-index: 10: konten yang bergulir digambar setelah header dalam urutan dokumen; tanpa z-index, konten dapat muncul menimpa header. Nilai z-index hanya berlaku pada elemen yang diposisikan — sticky termasuk (lihat z-index ).
3. background: rgb(255 255 255 / 80%): latar putih dengan opasitas 80% membuat konten di baliknya masih samar terlihat (lihat color-syntax ).
4. backdrop-filter: blur(8px): kaburkan apa pun yang berada di belakang elemen. Fitur ini sudah didukung semua browser utama modern; efeknya memang tidak terlihat bila latar berupa warna solid.

Pengganti untuk Browser Tanpa backdrop-filter #

@supports mendeteksi dukungan fitur dan menaikkan opasitas latar bila backdrop-filter tidak ada:

@supports not (backdrop-filter: blur(8px)) {
  .topbar {
    background: rgb(255, 255, 255);
  }
}

Pendekatan ini menjamin keterbacaan teks header di semua browser — efek kaca adalah bonus, bukan syarat (lihat progressive-enhancement ).

Sticky vs Fixed #

Dua nilai position sering tertukar untuk kebutuhan yang sama:

fixed mengeluarkan header dari alur sehingga konten pertama perlu padding-top setinggi header agar tidak tertutup (lihat fixed-positioning ). sticky bebas dari masalah itu dan berhenti menempel ketika induknya selesai — cocok untuk header halaman maupun header tabel.

Satu penyesuaian yang selalu menyertai header sticky: tautan lompat (<a href="#id">) mendarat dengan target menempel di tepi atas viewport — tepat di balik header. Deklarasi scroll-margin-top pada elemen target memberi jarak aman:

section[id] {
  scroll-margin-top: 72px;
}

Pada ponsel, pertimbangkan juga memperinggi header — padding 8px alih-alih 12px dalam media query — agar area konten yang terlihat tidak menyusut berlebihan. Header setinggi separuh layar tetap “berfungsi”, tetapi pengguna kehilangan konteks halaman setiap kali menggulir.

Demo chapter ini memuat penanda uji otomatis yang memverifikasi position: sticky, top: 0px, z-index: 10, dan backdrop-filter: blur(8px) pada header.