membuat sticky header show hide on scroll

membuat header sticky hilang saat scroll ke bawah dan muncul kembali saat scroll ke atas

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat sticky header show hide on scroll.

beberapa waktu lalu saya memodifikasi sedikit tampilan blog ini, salah satunya adalah membuat header sticky hilang saat scroll ke bawah dan muncul kembali saat scroll ke atas pada tampilan mobile saja.

tujuan saya menerapkan fitur ini tentu untuk kenyamanan pembaca saat mengakses blog ini melalui mobile / smartphone, tampilan akan penuh dari atas sampai ke bawah tanpa adanya header yang menutupi sebagian layar, namun header bisa muncul kembali saat pembaca melakukan scroll ke atas.

untuk demonya kalian bisa melihat melalui tombol di bawah ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Membuat Sticky Header Show Hide On Scroll

sebelum memulai pastikan header kalian sudah sticky jika belum silakan tambahkan css di bawah ini di atas kode ]]></b:skin> atau di atas kode </style> ,jika header kalian memiliki ID berbeda silakan di ganti.

#header{position:fixed;position:-webkit-sticky;top:0px;transition:top .3s ease}

lanjut tambahkan juga css di bawah ini, fungsi css ini untuk menyembunyikan header ketika di scroll ke bawah, jika header masi terlihat sedikit saat di scroll ke bawah bisa kalian perbesar top:-70px nya misalnya menjadi top:-100px

@media screen and (max-width:640px){
#header.show{top:-70px}}

pada css max-width:640px artinya hanya akan aktif pada layar max 640px dan tidak aktif jika di layar yang lebih besar, namun jika ingin di aktifkan semua ukuran layar termasuk pc gunakan saja css #header.show{top:-70px}

terakhir salin javascript di bawah ini letakkan di atas kode </body> jika tidak menemukannya kemungkinan telah di parse shingga akan tampak seperti &lt;!--</body>--&gt;&lt;/body&gt;

<script>/*<![CDATA[*/ 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>

jika sudah jangan lupa untuk klik simpan dan lihat hasilnya, ok jadi sekian cara membuat sticky header show hide on scroll semoga bermanfaat.

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