Sebenarnya aku ingin menambahkan fitur pada menu navigasi di header blog ini, tapi kalau template ini aku pasang sticky header kelihatannya agak kurang cocok. Terus apa sih yang dimaksud dengan sticky header?, header melayang kalau biasanya sih disebut dengan sticky header hide menu on scroll down and show menu on scroll top. Kalau diartikan dalam bahasa indonesia menjadi header melayang yang hilang saat halaman di gulir ke bawah dan kembali muncul saat di gulir ke atas.

Tampilan awal pada sticky header, header akan terlihat seperti biasa yaitu menempel atau melayang di bagian atas di atas halaman blog. Saat di scroll ke bawah, header akan menghilang. Namun saat di scroll lagi ke atas, header akan muncul kembali seperti semula.

Membuat Sticky Header Otomatis Hilang dan Muncul Saat Scroll Ke Bawah atau Atas

Dengan memasang sticky header akan membuat tampilan blog kalian menjadi semakin efisien atau akan terlihat semakin bersih. Dan tampilan blog kalian akan penuh dari atas ke bawah dan tidak akan ada header yang mengganggu di bagian atas. Akan tetapi jika pengunjung blog kalian ingin melihat header mereka bisa kembali dimunculkannya dengan cara scroll ke atas, oke langsung saja ikuti tutorial di bawah ini sampai habis.

Hal pertama yang harus kalian lakukan adalah mencari id header kalian, disini aku akan menggunakan contoh dengan nama id #header. Karena semua kode akan memanggil kode ID tersebut. Jika nama kode ID yang kalian gunakan berbeda, kalian tinggal mengganti ID yang ada di tutorial ini dengan ID yang kalian gunakan, nanti akan aku tandai mana saja yang harus kalian ganti dengan kode ID header kalian.

Kalian tambahkan CSS berikut jika header kalian belum sticky. Tapi jika header kalian sudah sticky LEWATI saja langkah ini dan langsung ke tutorial nomor tiga!

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

CATATAN: titik-titik (....) itu kode CSS bawaan blog kalian. Jangan dihapus. Kalian tinggal menambahkan saja CSS di tutorial ini di bawah kode yang sudah ada.

Tambahkan kode CSS baru berikut

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

Jika header tenggelam ke atas atau terlalu kebawah, perbesar nilai ini, kalian bisa merubah yang aku tandai contoh menjadi -82px.

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: revashare
  */
  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 sudah aku tandai kalian bisa menggantinya dengan nama ID dari header yang kalian gunakan pada blog kalian masing-masing.

Terakhir simpan template dan lihat hasilnya.

Demo

Berikut adalah contoh demonya.

• Demo

Semoga tutorial kali ini bisa membantu kalian 😀.