Cara Membuat Menu Melayang Saat Di Scroll (Sticky Menu)

Hal yang perlu di perhatikan dalam membuat sebuah blog adalah bagaimana caranya membuat pengunjung blog kita nyaman untuk dikunjungi, selain tampilan tema yang menarik, aplikasi pembantu lainnya pun perlu diperhatikan. Nah, sekarang kita akan membahas bagaimana cara membuat Sticky Menu, jika anda merasa kurang familiar dengan kata tersebut, Sticky Menu adalah cara agar membuat Menu atau Navigasi blog kita bergerak, tidak diam di tempat alias melayang meski di scroll kebawah, otomatis akan mengikuti sehingga akan memudahkan pengunjung blog kita dapat dengan mudah memakai menu navigasi untuk menjelajah di blog kita tanpa harus bolak balik menscroll mouse ke atas dan kebawah.

Pertama

Anda masuk ke Dashboard Blogger > pilih menu 'Template' dan pilih 'Edit HTML'

setelah itu anda cari kode </body> dengan menekan CTRL+F. Setelah itu masukan kode berikut, dan tempatkan tepat di atas </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> 

Diatas saya mendemonstrasikan menu '.nav', anda bisa merubahnya tergantung keinginan. Jika anda ingin header maka isikan '#header'.

Lihat Priview DEMO

Dengan begitu anda telah satu langkah usaha untuk meningkatkan traffic situs anda. Selamat Mencoba!