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

Pada update terbaru template Blogger Igniplex v2.6 kemarin, saya menambahkan satu fitur pada bagian menu navigasi di header. Kalau bahasa Inggrisnya sih disebut dengan sticky header hide menu on scroll down and show menu on scroll top. Artinya header melayang (alias nyangkut) yang hilang saat halaman digulir ke bawah dan kembali muncul saat digulir ke 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
SHARE Pin Share
Artikel Terkait
8 komentar
  1. kayak di template sebelah :)

    BalasHapus
  2. Nunggu tutorial pesan komentar ngikut iframe biar gak jatuh kebawah

    BalasHapus
  3. Mbak Igniel, gimana sih caranya agar peringatan yg di tulis di atas kotak komentar agar tetap di situ.

    Soalnya punyaku setelah ada orang komentar kok jadi turun di bawah kotak komentar ya kata peringatannya.

    Kira-kira cara mengatasinya gimana ya, saya sudah ngubek-ngubek google tapi nggak ketemu caranya, mungkin bisa di batu kah tutorialnya Mbak, di tunggu ye hehe

    BalasHapus
    Balasan
    1. Iya bener, di igniplex 2.6 bisa, mudah2an dibikin tutorialnya

      Hapus
  4. Halo teman bagaimana cara menempatkan profil pada posting ketika berbagi di facebook?

    BalasHapus
  5. Mb igniel please buat tutorial untuk judul titile yang tampil di blog berbeda sama yang tampil di serp google untuk blogger . . Kalau yang di wordpres kan pake plugin seo by yoast . . Kalau di blogger gimana mb ya

    BalasHapus
  6. Kerenn..request donk mas iginel buat forum diskusi blogger

    BalasHapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!