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

Cara membuat menu navigasi header melayang yang otomatis hilang saat scroll ke bawah dan muncul saat scroll ke atas hanya menggunakan CSS.

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
30
Membuat Sticky Header Otomatis Hilang / Muncul Saat Scroll Ke Bawah / Atas
Membuat Sticky Header Otomatis Hilang / Muncul Saat Scroll Ke Bawah / Atas
Cara membuat menu navigasi header melayang yang otomatis hilang saat scroll ke bawah dan muncul saat scroll ke atas hanya menggunakan CSS.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

30 komentar

  • 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> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • erykaditya
    29 Oktober, 2023
    Profil: https://www.blogger.com/profile/06340651707308414155
    kalau menu yang disamping gimana kak biar gak hilang saaat scroll?
  • Rabbit Run
    07 Januari, 2022
    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
    • Rabbit Run
      10 Januari, 2022
      Profil: https://www.blogger.com/profile/15515183494785880008
      Masih menunggu ....
    • Rabbit Run
      11 Januari, 2022
      Profil: https://www.blogger.com/profile/15515183494785880008
      Ternyata header fiksioner lbih cenderung ke pke class ,,
    • Igniel
      11 Januari, 2022
      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]
    • Rabbit Run
      11 Januari, 2022
      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
    • Rabbit Run
      11 Januari, 2022
      Profil: https://www.blogger.com/profile/15515183494785880008
    • Rabbit Run
      11 Januari, 2022
      Profil: https://www.blogger.com/profile/15515183494785880008
      header class="header" role="banner"
  • Irwanda Rizky
    21 Maret, 2021
    Profil: https://www.blogger.com/profile/03196636693297520266
    ntaps
  • Brok3n link
    21 November, 2020
    Profil: https://www.blogger.com/profile/04886843121012440281
    Makasih mbak bisa
  • Wildan Wiarta
    19 November, 2020
    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 November, 2020
    Profil: https://www.blogger.com/profile/10793002941468092551
    Apa ini bisa di terapkan ke template viomagz v3.3.3 mba?
  • Sultan Note
    10 Oktober, 2020
    Profil: https://www.blogger.com/profile/18079926358561058414
    Demo na salah Alamat kayana kak -_-
  • Wahyuddin Rosi
    01 September, 2020
    Profil: https://www.blogger.com/profile/11987960097394341096
    saya pake v2.6 gimana caranya menambah lebar header?
  • Syams
    28 Juli, 2020
    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 Juli, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Memang belum ada mas.
      Masuk list dulu ya.
  • Dilwar
    23 Juli, 2020
    Profil: https://www.blogger.com/profile/13318618984684228588
    Great work
  • Muhammad Rutami
    21 Juli, 2020
    Profil: https://www.blogger.com/profile/10134243616370516021
    Terimakasih kaka... ini yang saya cari 😁
  • Iska
    11 Juli, 2020
    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 Juli, 2020
      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 Juli, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nanti saya posting soal ini.
  • Rio Agustya
    11 Juli, 2020
    Profil: https://www.blogger.com/profile/04828320922435402699
    Nah ini nih yang saya cari, kemarin sempet googling tapi gagal
  • Rico
    29 Juni, 2020
    Profil: https://www.blogger.com/profile/02600197375846313975
    Kerenn..request donk mas iginel buat forum diskusi blogger
  • Mas Akrom
    15 Juni, 2020
    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 Juni, 2020
    Profil: https://www.blogger.com/profile/08157719174756120565
    Halo teman bagaimana cara menempatkan profil pada posting ketika berbagi di facebook?
  • Arif Rudiantoro
    04 Juni, 2020
    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
      05 Juni, 2020
      Profil: https://www.blogger.com/profile/07358011416112690996
      Iya bener, di igniplex 2.6 bisa, mudah2an dibikin tutorialnya
  • Mastah
    04 Juni, 2020
    Profil: https://www.blogger.com/profile/07358011416112690996
    Nunggu tutorial pesan komentar ngikut iframe biar gak jatuh kebawah
  • Ega Adrian N.
    04 Juni, 2020
    Profil: https://www.blogger.com/profile/08675018576967236779
    kayak di template sebelah :)
  • Riedayme
    03 Juni, 2020
    Profil: https://www.blogger.com/profile/06842964811765796933
    mantapp