Cara Menciptakan Sajian Blog Melayang (Sticky) Dikala Di Scroll
Kali ini saya akan mengembangkan tutorial cara Membuat Menu atau Header Melayang (sticky) ketika discroll di Blogger dan cara mengatasi hidangan atau header yang tidak melayang (sticky) setelah memasang script sticky menu.
Caranya cukup gampang sahabat hanya memasang satu instruksi jQuery dan mengganti id class-nya., kemudian simpan dan lihat hasilnya.
Bagi yang tertarik dan ingin mencobanya, silahkan lakukan tutorial dibawah ini.
Cara Membuat Menu Melayang (Sticky) Saat Discroll Di Blogger
Buka Blogger sahabat kemudian buka hidangan Tema, setelah itu Edit HTML.
Setelah itu cari instruksi </body>, lebih mudahnya untuk mencari instruksi tersebut tekan CTRL + F.
Selanjutnya Tambahkan instruksi dibawah ini sebelum instruksi yang kita cari diatas.
<script type='text/javascript'> //<![CDATA[ $(document).ready(function() { var stickyNavTop = $('#nav-wrapper').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('#nav-wrapper').css({ 'position': 'fixed', 'top':0, 'z-index':9999 }); } else { $('#nav-wrapper').css({ 'position': 'relative' }); } }; stickyNav(); $(window).scroll(function() { stickyNav(); }); }); //]]> </script>Ganti instruksi #nav-wrapper dengan id Menu atau Header blog sobat.
Setelah itu Simpan Tema, dan lihat Hasilnya.
Cara Mengatasi Menu Yang Tidak Melayang Atau Sticky
Jika hidangan tidak melayang setelah memasang script di atas atau script sticky yang lainya, silahkan ikuti cara dibawah ini :
Tambahkan Kode dibawah ini sebelum tag pembuka dan sehabis tag epilog HTML hidangan sobat.
<div id='sticky-menu'> /* HTML Menu Blog Sobat */ </div> Penempatan instruksi diatas ibarat dibawah ini :
<div id='sticky-menu'> /* Tag Pembuka HTML Menu Blog Sobat */ <div id='menu-nav' class='menu'> <ul> <li><a href='/'>Home</a></li> <li><a href='/menu1'>Menu1</a></li> <li><a href='/menu2'>Menu2</a></li> <li><a href='/menu3'>Menu3</a></li> <li><a href='/menu4'>Menu4</a></li> </ul> </div> /* Tag Penutup HTML Menu Blog Sobat */ </div>Setelah itu cari instruksi </style> atau ]]></b:skin>, lebih mudahnya untuk mencari instruksi tersebut tekan CTRL + F.
Tambahkan Kode CSS dibawah ini sebelum instruksi yang kita cari di atas.
#sticky-menu{ position:fixed; top: 0; left: 0; width: 100% }Selanjutnya ganti id pada script jQuery atau JavaScript sticky menu, jikalau sahabat memakai instruksi jQuery yang saya berikan, maka karenanya ibarat dibawah ini :
<script type='text/javascript'> //<![CDATA[ $(document).ready(function() { var stickyNavTop = $('#sticky-menu').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('#sticky-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 }); } else { $('#sticky-menu').css({ 'position': 'relative' }); } }; stickyNav(); $(window).scroll(function() { stickyNav(); }); }); //]]> </script>Simpan dan Lihat hasilnya.
Sekian tutorial cara Membuat Menu atau Header Melayang (sticky) ketika discroll di Blogger, selamat mencoba. Sumber https://www.denylistianto.com/