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

Artikel Terkait

29 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Trial MembƎr
    7/1/22
    Profil: https://www.blogger.com/profile/15515183494785880008
    Untuk template fiksioner gmn kak, sy agak bingung, ikuti tutor brhasil, tpi yg terpengaruh cuma bagian judul blog di header aja, icon hamburger + ikon search + background header gk terpengaruh
    • Trial MembƎr
      10/1/22
      Profil: https://www.blogger.com/profile/15515183494785880008
      Masih menunggu ....
    • Trial MembƎr
      11/1/22
      Profil: https://www.blogger.com/profile/15515183494785880008
      Ternyata header fiksioner lbih cenderung ke pke class ,,
    • Igniel
      11/1/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Di tema Fiksioner langsung menyasar ke tag <header>. Jadi kode ini:
      document.getElementById("header")
      Ganti jadi ini:
      document.getElementsByTagName("header")[0]
    • Trial MembƎr
      11/1/22
      Profil: https://www.blogger.com/profile/15515183494785880008
      Saya sudah punya cara lain kak, mengikut cara kyk template default blogger: soho...

      Saya nemu caranya satu jam setelah saya posting komentar di atas....

      Kode
      Saya ganti jadi
    • Trial MembƎr
      11/1/22
      Profil: https://www.blogger.com/profile/15515183494785880008
    • Trial MembƎr
      11/1/22
      Profil: https://www.blogger.com/profile/15515183494785880008
      header class="header" role="banner"
  • Irwanda Rizky
    21/3/21
    Profil: https://www.blogger.com/profile/03196636693297520266
    ntaps
  • Brok3n link
    21/11/20
    Profil: https://www.blogger.com/profile/04886843121012440281
    Makasih mbak bisa
  • Wildan Wiarta
    19/11/20
    Profil: https://www.blogger.com/profile/17843052679929553229
    Mbak kira-kira kalau buat fitur search buat blog loker (keyword, lokasi, jenis pekerjaan) itu apakah menggunakan javascript juga?
  • Panji Supratman
    13/11/20
    Profil: https://www.blogger.com/profile/10793002941468092551
    Apa ini bisa di terapkan ke template viomagz v3.3.3 mba?
  • Sultan Note
    10/10/20
    Profil: https://www.blogger.com/profile/18079926358561058414
    Demo na salah Alamat kayana kak -_-
  • Wahyuddin Rosi
    1/9/20
    Profil: https://www.blogger.com/profile/11987960097394341096
    saya pake v2.6 gimana caranya menambah lebar header?
  • Syams
    28/7/20
    Profil: https://www.blogger.com/profile/03084103896995136774
    OOT dikit mbak, apakah ada tutorial "Dark Mode" untuk blog? Saya cari kok gak ada yah.
    • Igniel
      28/7/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Memang belum ada mas.
      Masuk list dulu ya.
  • Info Kaal
    23/7/20
    Profil: https://www.blogger.com/profile/13318618984684228588
    Great work
  • Muhammad Rutami
    21/7/20
    Profil: https://www.blogger.com/profile/10134243616370516021
    Terimakasih kaka... ini yang saya cari 😁
  • Iska
    11/7/20
    Profil: https://www.blogger.com/profile/17599499159229080857
    oh ya OOT nih, mau tanya
    mba udah nyoba posting dari dasbor Blogger terbaru?

    ada masalah kecil, tapi cukup mengganggu

    hasil RSS feed nya tidak memunculkan data thumbnail URL, ini sangat berpengaruh bagi pengguna template yang menggunakan Related Posts Widget

    aku lihat dari https://www.igniel.com/feeds/posts/summary sepertinya mba masih posting dari dasbor lama Blogger, karena postingan pertama masih memunculkan



    mungkin mba punya solusi dari masalah ini?
    • Iska
      11/7/20
      Profil: https://www.blogger.com/profile/17599499159229080857
      em nya ada yang ga keluar

      media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://4.bp.blogspot.com/-tPStZBx2_Nk/XuXGEN8MVjI/AAAAAAAAIu4/GzCER3CoTQAnAo8BJINaQA7IGJ1U4laUQCK4BGAsYHg/s72-c/Kode-Promo-Diskon.png" height="72" width="72"

      aku ulangi lagi
    • Igniel
      28/7/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nanti saya posting soal ini.
  • Rio Agustya
    11/7/20
    Profil: https://www.blogger.com/profile/04828320922435402699
    Nah ini nih yang saya cari, kemarin sempet googling tapi gagal
  • Rico
    29/6/20
    Profil: https://www.blogger.com/profile/02600197375846313975
    Kerenn..request donk mas iginel buat forum diskusi blogger
  • Mas Akrom
    15/6/20
    Profil: https://www.blogger.com/profile/05861238489153403634
    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
  • Afonso Muchanga
    12/6/20
    Profil: https://www.blogger.com/profile/08157719174756120565
    Halo teman bagaimana cara menempatkan profil pada posting ketika berbagi di facebook?
  • Arif Rudiantoro
    4/6/20
    Profil: https://www.blogger.com/profile/08153473975321332891
    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
    • Mastah
      5/6/20
      Profil: https://www.blogger.com/profile/07358011416112690996
      Iya bener, di igniplex 2.6 bisa, mudah2an dibikin tutorialnya
  • Mastah
    4/6/20
    Profil: https://www.blogger.com/profile/07358011416112690996
    Nunggu tutorial pesan komentar ngikut iframe biar gak jatuh kebawah
  • Ega Adrian N.
    4/6/20
    Profil: https://www.blogger.com/profile/08675018576967236779
    kayak di template sebelah :)
  • Riedayme
    3/6/20
    Profil: https://www.blogger.com/profile/06842964811765796933
    mantapp