Cara Membuat Menu Melayang Setelah Discroll ke Bawah (Sticky Menu)

Sticky menu memudahkan pengunjung blog untuk mengakses menu utama pada blog kita tanpa harus naik turun scroll. Sticky menu ini awalnya seperti menu biasanya, namun setelah mouse discroll  kebawah menu ini akan melayan (fixed).

• Demo

Salin kode berikut di atas kode </body> dan tentukan selectornya pada script di bawah ini adalah .nav

 <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>

Memunculkan menu setelah discroll

Apabilah ingin memunculkan menu setelah di scroll gunakan kode dibawah ini.

 <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': 'absolute', 'top':-9999, 'left':-9999 });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

• Demo

Sumber : Kang Ismet