Membuat Menu Navigation Melayang Setelah Discroll (Sticky Menu)

Tutorial tentang Cara Membuat Menu Navigation Melayang Setelah Discroll (Sticky Menu) ini saya buat karena saya telah menemukan pertanyaan sobat blogger pada suatu group dalam Facebook dan sekarang ini saya berencana akan membuatnya.

Menu Melayang setelah discroll atau sering disebut juga Sticky Menu ini berguna untuk tetap menampilkan menu yang ada pada blog kita walaupun blog kita scroll ke bawah. Sticky Menu ini awalnya akan terlihat normal, tetapi akan melayang (fixed) ketika mouse discroll ke bawah.

Demo

Cara Membuat Menu Navigation Melayang Setelah Discroll :

1. Simpan kode berikut ini tepat di atas </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky
    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>

2. Silahkan ganti .nav dengan elemen yang ada pada Menu Navigasi pada blog sobat

Sumber : http://blog.kangismet.net/2013/11/membuat-menu-melayang-setelah-discroll.html