Membuat Sticky Header Otomatis Hilang / Muncul Saat Scroll Ke Bawah / Atas

Pada update terkini template Blogger Igniplex v2.6 kemarin, saya menambahkan satu fitur pada bagian hidangan navigasi pada header. Kalau bahasa Inggrisnya sih disebut dengan sticky header hide menu on scroll down and show hidangan on scroll top. Artinya header melayang (alias nyangkut) yang hilang ketika page digulir ke bawah dan balik terdapat waktu digulir ke atas.

Pada tampilan awal, header akan terlihat melayang pada atas halaman. Saat pembaca melakukan scroll ke bawah, header akan menghilang. Namun ketika pembaca scroll lagi ke atas, header akan muncul pergi memakai posisi yang sama yaitu melayang.

Ini memberikan kesan efisien buat saya. Tampilan halaman akan penuh dari atas ke bawah tanpa adanya header yang mengganggu. Tetapi header sanggup balik dimunculkan saat pembaca menginginkannya.

Kalau kamu mau menerapkan auto show hide sticky header misalnya Igniplex pada blog masing-masing, silakan ikuti tutorial ini sampai habis.

Saya asumsikan kamu mempunyai header dengan nama id #header. Semua kode akan ditulis menggunakan ID tersebut. Jika nama ID berbeda tinggal ganti saja.
Jika header belum sticky, tambahkan CSS berikut. Ingat ya, kalau sudah sticky LEWATI langkah ini dan langsung ke nomor tiga!
```
					#header{ .... .... .... position: sticky; position: -webkit-sticky; top: 0px; transition: top .3s ease; }
				
```
CATATAN: titik-titik (....) berarti kode CSS bawaan yang sudah ada sebelumnya. Jangan dihapus. Tambahkan saja CSS yang saya tuliskan di bawah kode yang sudah ada.
Tambahkan kode CSS baru berikut.
```
					#header.show{ top: -70px; }
				
```
Jika nantinya header masih keliatan sedikit saat disembunyikan, perbesar nilai ini, misalnya menjadi -100px.

Lanjut tambahkan Javascript DI ATAS kode </body>. JS menjadi peran penting dalam membuat sticky header hilang saat scroll ke bawah dan muncul saat scroll atas. Ini JS biasa ya, tidak perlu jQuery. Jadi ringan deh.

					<script> //<![CDATA[ /* Sticky Header. Auto hide on scroll bottom, show on scroll top. By: www.igniel.com */ 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>

Ingat, sesuaikan yang ditandai dengan nama ID dari header masing-masing.

Terakhir simpan template dan lihat hasil akhirnya.

Demo

Referensi

https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

Sekian tutorial cara membuat menu melayang muncul dan menghilang saat scroll. Mudah-mudahan bisa mudah dipahami. Langsung praktekan deh di blog masing-masing.

Untuk contohnya bisa dilihat di sini.