Cara Membuat Menu Blog Melayang (Sticky) Saat Di Scroll - Deny Listianto

July 9, 2018

Cara Membuat Menu Blog Melayang (Sticky) Saat Di Scroll

Cara Membuat Menu Melayang (Sticky) Di Blogger

Kali ini saya akan berbagi tutorial cara Membuat Menu atau Header Melayang (sticky) saat discroll di Blogger dan cara mengatasi menu atau header yang tidak melayang (sticky) setelah memasang script sticky menu.

Caranya cukup mudah sobat hanya memasang satu kode jQuery dan mengganti id class-nya., lalu 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 sobat lalu buka menu Tema, setelah itu Edit HTML.

Setelah itu cari kode </body>, lebih mudahnya untuk mencari kode tersebut tekan CTRL + F.

Selanjutnya Tambahkan kode dibawah ini sebelum kode 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 kode #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 menu 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 sesudah tag penutup HTML menu sobat.

<div id='sticky-menu'>
/* HTML Menu Blog Sobat */
</div>

Penempatan kode diatas seperti 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 kode </style> atau ]]></b:skin>, lebih mudahnya untuk mencari kode tersebut tekan CTRL + F.

Tambahkan Kode CSS dibawah ini sebelum kode 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, jika sobat menggunakan kode jQuery yang saya berikan, maka hasilnya seperti 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) saat discroll di Blogger, selamat mencoba.
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo