[Tutorial] Cara Mudah Membuat Show Hide Sticky Header saat Scroll

Tutorialoid - Apa itu sticky header? Sticky header adalah salah satu elemen pada sebuah halaman web yang tetap menempel di bagian atas layar saat pengguna melakukan scroll ke bawah. Ini berarti, saat pengguna menggulir halaman ke bawah untuk melihat konten lebih lanjut, header tetap terlihat di bagian atas layar, tidak ikut bergeser ke atas seperti elemen-elemen lainnya. Hal ini membantu pengguna untuk tetap memiliki akses cepat ke menu navigasi, pencarian, atau bagian penting lainnya dari situs web tanpa harus kembali ke atas halaman.

Sticky header sering digunakan untuk meningkatkan keterjangkauan dan keterlihatan elemen-elemen penting pada situs web, serta meningkatkan pengalaman pengguna dengan memudahkan navigasi.

Pada kasus kali ini, saya akan membuat tampilan dari sticky header ini agak sedikit berbeda yaitu dengan mengubahnya menjadi tampilkan saat scroll ke atas, dan sembunyikan saat scroll ke bawah atau dalam bahasa inggrisnya (Show Hide Sticky Header).

Bagaimana cara membuat show hide sticky header ini? Caranya cukup mudah, di tutorial ini saya sudah menyiapkan bahan-bahannya seperti; CSS dan JS. Anda hanya perlu mengikuti langkah demi langkahnya dan copy paste code yang sudah saya berikan di bawah.

Membuat Show Hide Sticky Header saat di Scroll

Buat Kode CSS

Untuk langkah yang pertama, pastikan Anda sudah memiliki header dengan id #header (apabila nama id yang ada di template Anda berbeda, silahkan tinggal ganti saja). Dan apabila header tersebut belum sticky, maka tambahkan kode CSS seperti berikut:

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

Ingat! Jika header sudah dalam keadaan sticky, Anda bisa melewati langkah ini. Untuk transisi, silahkan atur sesuai keinginan.

Lanjut, tambahkan kode CSS baru seperti contoh berikut:

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

Buat Kode JS/Javascript

Langkah kedua, silahkan tambahkan kode Javascript berikut DI ATAS kode </body>

<script> //<![CDATA[
  /*
   Show Hide Sticky Header
  */
  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>

NOTE:
Pada kolom document.getElementById("header"), silahkan ganti dan sesuaikan dengan id dari header yang ada di template Anda masing-masing.

Dan, untuk penampakan keseluruhan kodenya akan menjadi seperti ini:

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

}

/*
   Show Hide Sticky Header
  */
  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;
  }

Langkah terakhir, silahkan simpan template dan lihat bagaimana hasilnya.

Nah, jika ingin melihat demo atau contoh show hide stiky header ini, bisa melalui link berikut ini:

Lihat Demo

Begitulah kira-kira cara membuat show hide sticky header saat di scroll. Semoga bisa membantu, sekian dan terimakasih!

Referensi:
w3schools.com