Membuat Navigasi Menu Statis - Tetap Muncul Saat Blog Discroll ke Bawah

Baca Juga

KODE Javascript agar Navigasi Menu di bawah header blog tetap muncul saat halaman di-scroll ke bawah --Static Menu, Sticky Menu, atau Navigasi Menu Melayang (Floating).

KODE JAVASCRIPT STATIC NAV MENY (FLOATING)

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#menu').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#menu').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Yang warna merah (#menu) adalah nama Navigasi Menu di bawah header. Sesuaikan dengan nama elemen menu blog Anda, mungkin "nav", "nav menu", "main menu", atau lainnya. Tiap template berbeda.

Cara Pasang:
1. Template > Edit HTML
2. Copas kode tersebut di atas kode </body>
3. Pastikan template Anda ada kode JQuery seperti ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Jika belum ada, pasang di atas kode </head>, agar kode navigasi statis (melayang) bisa berfungsi.*