Cara Membuat Menu Navigasi Blog Melayang di Atas atau Sticky Navigation

Cara Membuat Menu Navigasi Blog Melayang di Atas atau Sticky Navigation - Sticky Navigation adalah menu navigasi yang menempel pada bagian atas halaman atau menu navigasi yang melayang dia atas ketika blog di scroll. hal ini bertujuan agar ketika user menscroll page ke bawah menu navigasi tetap ada. sehingga memudahkan user menjadi tidak bolak balik ke atas lagi.

Lalu bagaimanakah  Cara Membuat Menu Navigasi Blog Melayang di Atas atau Sticky Navigation ?

Hal ini sebenarnya cukup mudah untuk di lakukan akrena hanya membutuhkan beberapa baris script saja. 

1. Buka masuk ke pannel admin blog anda > pilih Template > klik Edit HTML

2. Cari tag </body> anda dapat menekan di Keyboard CTRL + F kemudian ketikan </body> agar lebih cepat.

3. Copy kode berikut dan letakan di bagian atas </body>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

    var stickyNavTop = $('#menu-nav').offset().top;

    var stickyNav = function(){

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

        if (scrollTop > stickyNavTop) {

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

        } else {

            $('#menu-nav').css({ 'position': 'relative' });

        }

    };

    stickyNav();

    $(window).scroll(function() {

        stickyNav();

    });

});

//]]>

</script>

*Notes
ganti #menu-nav dengan tag root menu anda karena setiap template punya tag id atau class yg berbeda - beda. apabila anda kesulitan mencarinya coba anda find salah satu isi menu navigasi anda dan lihat div teratasnya.

Code Menu Yang Akan Sticky Navigation

Apabila anda berhasil hasilnya anda dapat lihat seperti yang ada di blog ini. jika anda scroll ke bawah maka menunya mengikuti ke bawah dan melayang di atas.

Preview Menu Melayang Sticky Navigation

Selamat mencobanya di blog anda masing - masing.