HOME ABOUT US CONTACT US PRIVACY POLICY SITEMAP
» » Cara Membuat Menu Navigasi Sticky (Melayang Saat di Scroll)

Cara Membuat Menu Navigasi Sticky (Melayang Saat di Scroll)

Cara Membuat Menu Navigasi Sticky (Melayang Saat di Scroll)
Menu Navbar Melayang

 Navbar yaitu menu navigasi yang biasa kita jumpai di atas blog. biasanya jika blog kita tertalu banyak komentar dan mungkin postingan kita terlalu panjang pasti pengunjung juga jika ingin mencari navbar akan menscroll ke atas lagi dan itu terlalu jauh dan membuat tidak nyaman pengunjung. nah ... pada kali ini kita akan membahas tentang Cara Membuat Menu Navigasi Sticky (Melayang Saat di Scroll). tutorial ini saya ambil dari blog Kang Ismet sebuah blog yang menjadi inspirasi saya.

 kita langsung bahas di tutorial ini, caranya cukup mudah yaitu sebagai berikut :
1). Pergi ke Blogger Dashboard > Template > Edit HTML.
2). Cari kode </body> , dan letakkan kode di bawah ini tepat di atas kode </body>.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .nav
    var stickyNavTop = $('.nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya    
        if (scrollTop > stickyNavTop) {
            $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.nav').css({ 'position': 'relative' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>
3). Kemudian save dan lihat hasilnya, menu navbar ini akan melayang jika di scroll kebawah dan sebaliknya.

Semoga tutorial ini bermanfaat bagi Sahabat Blogger......
Terima kasih telah membaca artikel Cara Membuat Menu Navigasi Sticky (Melayang Saat di Scroll) . Jika Anda ingin copy-paste / menyalin sebagian ataupun keseluruhan dari artikel ini, harap anda mencantumkan link berikut Cara Membuat Menu Navigasi Sticky (Melayang Saat di Scroll) sebagai sumbernya atau anda bisa copy permalink dibawah ini.

2comments: