Cara Membuat Menu Melayang Ketika Discroll (Sticky Menu Fixed)

Tutorial Cara Membuat Header Fix (Tidak Bergerak) Ketika Di Scroll. Kali ini saya akan memberikan tutorial mengedit menu navigation bar / header menjadi fixed (Sticky menu), menjadikan menu melayang tidak ikut tergulung ke atas ketika discroll.

Dengan merubah menu / header blog menjadi sticky (Fixed) akan mempermudah pengunjung blog untuk memilih daftar menu di website / blog kita setelah selesai membaca sampai akhir tanpa harus scroll lagi ke atas..

Nah untuk cara membuat menu blog melayang ini cukup mudah, kalian tinggal ikuti langkah demi langkah dibawh ini...

cara membuat menu blog melayang

• Masuk ke menu Template / Tema, Edit HTML
• Sekarang Cari kode </body>
Cara Mencari Kode Di Edit HTML

Untuk mencari kode di edit html, kalian terlebih dahulu harus meng-Klik kotak kumpulan kodenya.
Setelah di klik tekan kombinasi keyboard CTRL + F. Ketik yang mau di cari lalu enter

• Setelah kode </body> ketemu, kalian masukan script menu sticky dibawah ini tepat diatasnya

JAVASCRIPT
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang akan dijadikan sticky yaitu .menunav
    var navSticky = $('.menunav').offset().top; 
    var menuFixed = function(){
        var scrollTop = $(window).scrollTop();  
        // Ketika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > navSticky) { 
            $('.menunav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.menunav').css({ 'position': 'relative' });
        }
    };
    // Jalankan fungsi
    menuFixed();
    $(window).scroll(function() {
        menuFixed();
    });
});
//]]>
</script>

Catatan + Keterangan

Silahkan kalian ganti kode ini .menunav dengan id / class dari menubar kalian.
Kalian juga bisa merubahnya dengan id / class header...

Script menu sticky ini memerlukan jquery, jika di template kalian belum ada jquerynya, silahkan pasang kode dibawah ini tepat di atas </head>

JAVASCRIPT
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>

• Nah kalo sudah semuanya terpasang, sekarang save template kalian dan lihat hasilnya
• Jika ada yang mau ditanyakan silahkan bertanya di kolom komentar :)

Cukup sekian dan terima kasih, semoga artikel tentang membuat menu melayang setelah discroll (sticky menu) ini bermanfat.
Keyword Terkait Untuk Cara Membuat Menu Melayang Ketika Di Scroll

• cara membuat header fixed dengan css
• membuat menu melayang dengan css
• cara membuat header website bergerak
• cara membuat menu melayang saat di scroll
• membuat menu navigasi melayang
• menu melayang pada web