Cara Membuat Menu Melayang Setelah Di Scroll (Sticky Menu)

                  Kali ini saya kan berbagi mengenai ilmu nge-blog. kita akan membuat menu navigasi yang melayang. sehingga ketika kalian scroll ke bawah menu navigasi blog kalian akan tetap berada didepan mata kalian. namanya Sticky Menu.

contoh :

 

langsung saja ikuti tutor di bawah :

1. kalian masuk ke blogger >template>Edit Html

2. sebelumnya tentukan selector dari menu kalian. misalkan (#menuhlng1)

contoh :

3. copy/paste kan script dibawah diatas code </body>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

    // Menentukan elemen yang dijadikan sticky yaitu #menuhlng1

    var stickyNavTop = $('#menuhlng1').offset().top; 

    var stickyNav = function(){

        var scrollTop = $(window).scrollTop();  

        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        

        if (scrollTop > stickyNavTop) { 

            $('#menuhlng1').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });

        } else {

            $('#menuhlng1').css({ 'position': 'relative' });

        }

    };

    // Jalankan fungsi

    stickyNav();

    $(window).scroll(function() {

        stickyNav();

    });

});

//]]>

</script>

3. selesai, simpan template.