Pernah nggak kamu perhatiin kalau di beberapa website atau blog, menu navigasi di bagian atas bisa hilang saat kamu scroll ke bawah, tapi tiba-tiba muncul lagi saat kamu scroll ke atas? Nah, itulah yang disebut sticky header dengan auto show/hide.
Jadi, pada tampilan awal, menu navigasi akan tetap terlihat di atas halaman. Tapi begitu kamu mulai menggulir ke bawah, menu ini akan otomatis menghilang supaya tampilan lebih luas dan nggak mengganggu. Kalau kamu scroll ke atas lagi, header akan kembali muncul. Fitur ini cukup keren karena memberikan tampilan yang lebih bersih dan efisien tanpa harus mengorbankan navigasi.
Selain itu, fitur ini sangat berguna untuk website yang memiliki banyak konten. Bayangkan kalau kamu harus scroll jauh ke bawah untuk membaca artikel, tapi tiba-tiba ingin kembali ke menu utama. Dengan sticky header yang muncul otomatis saat scroll ke atas, kamu nggak perlu repot mencari tombol kembali ke atas.
Kalau kamu mau menerapkan fitur ini di blog atau website sendiri, ikuti tutorial ini sampai habis ya!
Langkah-Langkah Membuat Sticky Header yang Bisa Sembunyi Saat Scroll
1. Pastikan Header Sudah Sticky
Pertama, kita harus memastikan bahwa header yang digunakan sudah dalam posisi sticky. Kalau belum, tambahkan kode CSS berikut:
#header{
position: sticky;
position: -webkit-sticky;
top: 0px;
transition: top .3s ease;
width: 100%;
background-color: white;
z-index: 1000;
}
Catatan: Kalau header kamu sudah sticky, lewati langkah ini dan langsung ke langkah berikutnya!
2. Tambahkan CSS untuk Menghilangkan Header Saat Scroll
Setelah memastikan header bisa melayang, sekarang kita tambahkan kode CSS supaya bisa disembunyikan saat scroll ke bawah.
#header.show{
top: -70px;
}
Kalau header masih terlihat sedikit saat menghilang, coba ubah nilai -70px menjadi lebih besar, misalnya -100px, supaya benar-benar tersembunyi.
Selain itu, jika header memiliki bayangan atau border bawah, pastikan juga menghapus efek tersebut saat header disembunyikan agar tampilan lebih bersih.
3. Tambahkan JavaScript untuk Mengontrol Scroll
Sekarang, kita tambahkan kode JavaScript supaya menu bisa otomatis muncul dan menghilang tergantung arah scroll. Masukkan kode berikut di atas tag </body>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header").classList.remove('show');
} else {
document.getElementById("header").classList.add('show');
}
prevScrollpos = currentScrollPos;
};
</script>
Kode di atas bekerja dengan cara mendeteksi pergerakan halaman. Jika pengguna menggulir ke bawah, kelas .show akan ditambahkan ke header, sehingga header menghilang. Sebaliknya, jika pengguna menggulir ke atas, kelas .show dihapus, dan header kembali muncul.
Tambahkan juga event listener untuk mendeteksi jika pengguna berhenti scroll, sehingga header bisa tetap muncul dalam beberapa kondisi tertentu.
4. Simpan dan Uji Hasilnya
Setelah semua kode ditambahkan, jangan lupa simpan perubahan dan coba lihat hasilnya di browser. Kalau semuanya berjalan dengan baik, header akan otomatis tersembunyi saat kamu scroll ke bawah dan muncul lagi saat scroll ke atas.
Jika fitur tidak berjalan seperti yang diharapkan, periksa kembali ID dari elemen header dan pastikan JavaScript sudah ditulis dengan benar. Pastikan juga tidak ada konflik dengan kode lain yang ada di website kamu.
Kesimpulan
Fitur sticky header yang otomatis tersembunyi saat scroll ke bawah dan muncul kembali saat scroll ke atas adalah salah satu cara untuk meningkatkan pengalaman pengguna dalam menjelajahi website atau blog. Dengan tampilan yang lebih bersih dan bebas dari elemen yang mengganggu, pengunjung bisa lebih fokus pada konten.
Keunggulan fitur ini:
- Navigasi tetap mudah diakses, tanpa harus selalu terlihat.
- Tampilan lebih luas dan rapi, karena header menghilang saat tidak dibutuhkan.
- Mudah diterapkan, cukup dengan beberapa baris kode CSS dan JavaScript.
- Meningkatkan pengalaman pengguna, karena navigasi tetap tersedia tanpa mengganggu konten.
- Membantu meningkatkan estetika desain website, terutama bagi yang mengutamakan tampilan minimalis.
Penutup
Membuat sticky header yang bisa otomatis muncul dan menghilang sebenarnya cukup mudah. Kamu hanya perlu menambahkan beberapa kode CSS dan JavaScript sederhana. Dengan tutorial ini, kamu bisa langsung menerapkannya di blog atau website kamu sendiri.
Pastikan kamu mencoba dan menguji kode di berbagai perangkat untuk memastikan responsivitasnya berjalan dengan baik. Jangan lupa juga untuk menyesuaikan warna dan desain header agar tetap sesuai dengan tema website kamu.
Kalau masih ada pertanyaan atau kendala, jangan ragu untuk bertanya. Selamat mencoba!