Hide fixed header on scroll

Menyembunyikan fixed header ketika halaman bergulir

fixed header adalah sebuah kondisi dimana elemen header yang terdapat dihalaman berada tetap ditempatnya atau tidak bergerak ketika halaman digulir ke atas maupun kebawah.

Sebagai contoh, bisa dilihat header halaman ini. Atau lihat demonya melalui tombol dibawah ini.

Demo fixed header

Javascript menyembunyikan header on scroll

Sedangkan Hide fixed header on scroll adalah sebuah kondisi dimana elemen fixed header yang secara otomatis akan bersembunyi ketika halaman digulir keatas dan kembali muncul ketika halaman digulir ke arah sebaliknya.

Pada tema Blogger responsive versi 3 semuanya menerapkan hide fixed header on scroll namun kondisi tersebut dihandle oleh script bawaan tema.

Untuk menerapkan fungsi hide on scroll gunakan script dibawah ini sebagai pengganti apabila script bawaan tema di non-aktifkan atau tidak difungsikan.

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("fixed-header").style.top = "0";
  } else {
    document.getElementById("fixed-header").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}</script>

Karena script menggunakan metode getElemenById maka sesuaikan atribut id elemen dengan id dalam script. Atau tambahkan jika belum ada.

Dalam script diatas id elemen adalah "fixed-header"

Pada .style.top = "-50px"; Nilai -50px ditentukan berdasarkan ketinggian (height) elemen header.

Klik tombol demo dibawah ini untuk melihat efek langsung penerapan script tersebut pada elemen fixed header.

Demo hide fixed header on scroll

⇐ Sebelumnya

Selanjutnya ⇒