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

Pada tampilan awal, header akan terlihat melayang di atas halaman. Saat pembaca melakukan scroll ke bawah, header akan menghilang. Namun saat pembaca scroll lagi ke atas, header akan muncul kembali dengan posisi yang sama yaitu melayang.

Header Melayang Show / Hide Otomatis Saat Scroll

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

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

1. Saya asumsikan kamu mempunyai header dengan nama id #header. Semua kode akan ditulis menggunakan ID tersebut. Jika nama ID berbeda tinggal ganti saja.
2. 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.

3. Tambahkan kode CSS baru berikut.

   #header.show{
     top: -70px;
   }

   Jika nantinya header masih keliatan sedikit saat disembunyikan, perbesar nilai ini, misalnya menjadi -100px.

4. 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.

5. Terakhir simpan template dan lihat hasil akhirnya.

Demo

Untuk contohnya bisa dilihat di sini.

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

Referensi

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