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.
- Saya asumsikan kamu mempunyai header dengan nama id #header. Semua kode akan ditulis menggunakan ID tersebut. Jika nama ID berbeda tinggal ganti saja.
- Jika header belum sticky, tambahkan CSS berikut. Ingat ya, kalau sudah sticky LEWATI langkah ini dan langsung ke nomor tiga!
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.#header{ .... .... .... position: sticky; position: -webkit-sticky; top: 0px; transition: top .3s ease; }
- Tambahkan kode CSS baru berikut.
Jika nantinya header masih keliatan sedikit saat disembunyikan, perbesar nilai ini, misalnya menjadi -100px.#header.show{ top: -70px; }
- 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.
Ingat, sesuaikan yang ditandai dengan nama ID dari header masing-masing.<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>
- 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
mantapp
BalasHapuskayak di template sebelah :)
BalasHapusNunggu tutorial pesan komentar ngikut iframe biar gak jatuh kebawah
BalasHapusMbak Igniel, gimana sih caranya agar peringatan yg di tulis di atas kotak komentar agar tetap di situ.
BalasHapusSoalnya 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
Iya bener, di igniplex 2.6 bisa, mudah2an dibikin tutorialnya
HapusHalo teman bagaimana cara menempatkan profil pada posting ketika berbagi di facebook?
BalasHapusMb 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
BalasHapusKerenn..request donk mas iginel buat forum diskusi blogger
BalasHapusNah ini nih yang saya cari, kemarin sempet googling tapi gagal
BalasHapusoh ya OOT nih, mau tanya
BalasHapusmba 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?
em nya ada yang ga keluar
Hapusmedia: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
Nanti saya posting soal ini.
HapusTerimakasih kaka... ini yang saya cari 😁
BalasHapusGreat work
BalasHapusOOT dikit mbak, apakah ada tutorial "Dark Mode" untuk blog? Saya cari kok gak ada yah.
BalasHapusMemang belum ada mas.
HapusMasuk list dulu ya.
saya pake v2.6 gimana caranya menambah lebar header?
BalasHapusDemo na salah Alamat kayana kak -_-
BalasHapusApa ini bisa di terapkan ke template viomagz v3.3.3 mba?
BalasHapusMbak kira-kira kalau buat fitur search buat blog loker (keyword, lokasi, jenis pekerjaan) itu apakah menggunakan javascript juga?
BalasHapusMakasih mbak bisa
BalasHapusntaps
BalasHapus