Cara Membuat Menu Melayang Saat Di Scroll [Sticky Menu]

Cara Membuat Menu Melayang Saat Di Scroll. Setelah lebih dari 6 bulan tidak pernah membuat postingan di blog ini, karena kesibukan diluar serta banyak sekali blog milik saya sehingga lupa kalo punya blog yang namanya balong tutorial heheheh. Nah tadi sewaktu browsing saya menemukan artikel tentang cara membuat sticky menu, menurut saya cukup menarik dan membuat tampilan blog jadi keren dan selain itu sesuai dengan fungsi menu, yaitu untuk membantu bernavigasi di blog atau website milik kita, dengan adanya trik ini maka semakin mudah kita menemukan letak menu navigasi, karena posisinya yang dibuat melayang di atas, sehingga ketika mouse di scroll, menu tersebut tidak ikut naik ataupun turun.
Jika anda tertarik untuk membuatnya di blog anda silahkan ikuti langkah-langkah nya berikut ini.

Cara Membuat Sticky Menu

Sticky Menu

1. Masuk ke Dashboard Blogger > Template > Edit HTML

2. Kemudian cari kode </body> dengan menekan CTRL+F. Masukan kode berikut, letakan 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>

Contoh Menu Navigasi

Pada elemen yang akan dibuat sticky dalam hal ini '.nav', bisa anda ganti dengan elemen ang lainnya tergantung selera. Sebagai contoh jika #Sidebar yang ingin dibuat sticky maka isikan '#Sidebar' dan seterusnya.

Selamat berkreasi, dan semoga berhasil.

Sumber : Blog Kang Ismet

Balong Tutorial