join grup whatsapp Join

membuat sticky header show hide on scroll

cara membuat header sticky hilang saat scroll ke bawah dan muncul kembali saat scroll ke atas, fitur ini tentu untuk kenyamanan pembaca
membuat sticky header show hide on scroll

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat sticky header show hide on scroll.

beberapa waktu lalu saya memodifikasi sedikit tampilan blog ini, salah satunya adalah membuat header sticky hilang saat scroll ke bawah dan muncul kembali saat scroll ke atas pada tampilan mobile saja.

tujuan saya menerapkan fitur ini tentu untuk kenyamanan pembaca saat mengakses blog ini melalui mobile / smartphone, tampilan akan penuh dari atas sampai ke bawah tanpa adanya header yang menutupi sebagian layar, namun header bisa muncul kembali saat pembaca melakukan scroll ke atas.

untuk demonya kalian bisa melihat melalui tombol di bawah ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Membuat Sticky Header Show Hide On Scroll

sebelum memulai pastikan header kalian sudah sticky jika belum silakan tambahkan css di bawah ini di atas kode ]]></b:skin> ,jika header kalian memiliki ID berbeda silakan di ganti.


#header{position:fixed;position:-webkit-sticky;top:0px;transition:top .3s ease}

lanjut tambahkan juga css di bawah ini, fungsi css ini untuk menyembunyikan header ketika di scroll ke bawah, jika header masi terlihat sedikit saat di scroll ke bawah bisa kalian perbesar top:-70px nya misalnya menjadi top:-100px


@media screen and (max-width:640px){
#header.show{top:-70px}}

pada css max-width:640px artinya hanya akan aktif pada layar max 640px dan tidak aktif jika di layar yang lebih besar, namun jika ingin di aktifkan semua ukuran layar termasuk pc gunakan saja css #header.show{top:-70px}

terakhir salin javascript di bawah ini letakkan di atas kode </body> jika tidak menemukannya kemungkinan telah di parse shingga akan tampak seperti &lt;!--</body>--&gt;&lt;/body&gt;


<script>/*<![CDATA[*/ 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>

jika sudah jangan lupa untuk klik simpan dan lihat hasilnya, ok jadi sekian cara membuat sticky header show hide on scroll semoga bermanfaat.

Referensi:
www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

Baca juga :
Donasi untuk mendukung creator terus berkarya, mulai seribu rupiah saja

20 komentar

  1. Assalammualaikum, maaf mas.. Saya coba di template median ui 1.5 bisa, cmn header agak ke potong cara atasin nya gimana? Terima kasih sebelum nya...
    1. Top:-70 bisa di naikin jadi 100 ,ika masih kepotong dkit naikin lg nilainya biar makin ke atas
    2. Ok siap terimakasih tanggapan nya, salam sukses...
    3. Siap mas sama2 ya
    4. Maaf, ternyata yg agak ke potong itu header nya mas wendy,, jdi bukan pas scroll nya yang header show, tiba tiba pas saya pakai sticky ini, header nya terlalu ke bawah bukan kepotong hehe, jadi header nya posisi nya pas belum di scrol pas awal2 itu terlalu kebawah jadi tulisan pinned post nya ga keliatan.. Mohon bantuan nya mas terimakasih banyak...
    5. Saya kurang paham maksudnya sampean gimana si mas
  2. Pokok nya header nya ke potong kebawah ada di video mas wendy
    1. Apakah blog ini juga terpotong?
    2. Ga sih.., divideo itu pas selesai pemasangan jdi ga keliatan pinned post nya.., hehe klo ga keberatan buat median ui 1.5 tutor nya header sticky ini. Saya puter balik berjam2 ga wrk gan.. Terimakasih banyak..
    3. Di vidio itu blog tes emg tdk di aktfkan pinned post nya, jika pinned post tidak tampil itu kemungkinan tidak di centang di tata letaknya. Tdk ada kaitannya sama script ini mas, coba mas perhatikan mngkin setidaknya mas paham seditikit css, css itu kurangkan top 70px jika header di beri class show, jd tidak ada kaitannya jika pinned hilang
    4. Ini mas.. Penting banget coba liat header nya deh ezrarahmaditya,com
    5. Ga enak dilihat nya, header nya seperti itu. Sudah saya tidak tampilkan slider sama pinned post nya masih aja ga work. Gimana ya mas.. Maaf banget repotin
  3. Buruan di lihat blog nya mas bro.. Keburu saya betulin header nya.
    1. Hm saya cek tidak ada apa2, kirimkan saja templatenya melalui halaman kontak nanti biar saya bantu editkan
    2. Ok, terimakasih banyak
    3. Hehe template privasi, mungkin klo median ui bagaimana cara nya gan?
    4. Itu terserah aja mas, intinya script tdk ada yg salah, masalah header terpotong juga saya tdk tau mksdnya sampean kaya gimana , karna saya juga sudah coba di beberapa template tidak ada masalah seperti itu, dan tidak ada kaitannya juga secara logika pakai script ini header bisa terpotong
    5. Kepanjangan komen saya 😅🤪, iya deh langsung aja edit template saya sudah saya email kok.. Terima kasih perhatian dan kesabaran nya..
  4. Req komen link aktif author
    1. cek postingan ini
      https://www.wendycode.com/2021/01/agar-komentar-blogger-tidak-terpotong.html


image quote pre code
© Wendy Code Developed by Jago Desain

Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english