Cara Membuat Header Tetap (Sticky/Fixed) Saat Di-scroll

Banyak yang bertanya, bagaimana cara membuat header website tetap statis, sticky atau fixed saat di-scroll? Ternyata sangat mudah. Cukup tambahkan class sticky atau fixed bila menggunakan TailwindCSS, sedangkan untuk Bootsrap pakai class sticky-top atau fixed-top.

Sebelumnya, saya sudah membuat studi kasus Tutorial membuat website #2: Desain header navigation bar dari awal hingga akhir.

Untuk tulisan ini, saya akan fokus pada perdebatan penggunaan class CSS mana yang lebih solutif untuk membuat header tetap saat di scroll.

Berikut langkah langkah membuat header yang benar adalah menggunakan properti CSS position dengan value sticky dari pada fixed .

Tanya kenapa?

CSS dengan value fixed dan sticky memang sama-sama berfungsi untuk membuat elemen HTML menjadi statis saat user menggulir halaman web.

Namun, ada perbedaan utama antara keduanya:

1. Sticky position (sticky):
   • Elemen dengan potition sticky akan tetap berada di posisi normal, baru bertidak fixed setelah berjumpa dengan elemen induk.
   • Artinya class sticky lebih dinamis, ia akan berubah sifat menjadi fixed setelah mencapai titik tertentu saat digulir.
2. Fixed Position (fixed):
   • Elemen HTML dengan posisi fixed akan tetap statis berada layar dan tidak akan berubah saat terjadi scroll.
   • Artinya, class fixed lebih saklek, tetap teguh pada pendirian, tidak berubah bila ada tindakan scroll atau tidak, fix.

Kalau begitu sudah fix dong pakai class fixed untuk elemet <header>, karena ia lebih sakti serta tidak terpenguh dengan tindakan scroll.

Tidak begitu juga pola penerapannya.

Class fixed memang akan soft your problem. Tapi coba ingat-ingat lagi quote keren yang satu ini:

“If this is the solution, I want my problem back.”

Maksudnya, jika class fixed solusi untuk header yang fixed, maka akan bermasalah dengan elemen dibawahnya.

Contoh penggunaan fixed:

Element <header> dengan class fixed akan mewarisi sifat saklek, sehingga elemen di bawah header akan tertutup atau tumpang tindih jika header menggunakan position: fixed;.

Untuk menghindari masalah ini, elemen di bawah header harus diberikan margin atau padding tambahan.

Contoh penggunaan sticky:

Element <header> dengan class sticky akan saling berdampingan dengan element dibawahnya, tapi bersikap fixed bila di-scroll.

Kesimpulan.

Penggunaan sticky memang solusi tepat untuk membuat tetap saat digulir. Namun, dalam kasus desain header yang menyatu dengan hero, class fixed lebih cocok. Tetap perhatikan interaksi antara elemen HTML untuk hasil terbaik.

Demikian, semoga bermanfaat.