Cara Membuat Menu Melayang Setelah Di Scroll (Sticky Menu)

TutorLoad30 - Kemarin saya sudah berbagi tutorial Cara Memasang Widget Facebook Fans Page di Blog. Sebagai informasi bahwa semua tutorial yang saya berikan pada blog ini semua sudah saya uji coba terlebih dahulu sehingga dipastikan tidak akan menyesatkan anda hehe. Baiklah untuk tutorial selanjutnya adalah tentang bagaimana membuat menu melayang setelah halaman di scroll ke bawah atau disebut juga Sticky Menu. Bisa anda lihat di blog ini sudah diterapkan pada menu navigasi di atas sehingga menu tersebut tidak akan tenggelam walaupun halaman di scroll ke bawah.

Sticky Menu

Fungsi dari membuat Sticky Menu ini adalah supaya memudahkan pengunjung yang sedang membaca sebuah artikel kita sampai bawah tidak perlu balik lagi ke halaman atas jika ingin mencari artikel atau konten lain dari menu navigasi. Sehingga pengunjung akan lebih mudah mengeksplor.

Langsung saja ikuti langkah-langkahnya di bawah ini.

1. Pertama silahkan anda masuk pada Blogger Template - Edit HTML.
2. Cari kode </body> kemudian paste script berikut ini diatasnya. Kemudian tentukan selektornya yang saya beri warna merah ( Pada script dibawah saya aplikasikan pada #nav untuk menu navigasi )
<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>
3. Selesai, terakhir tinggal simpan template anda.

Itulah tadi tutorial yang sudah saya kasih kali ini tentang Cara Membuat Menu Melayang Setelah di Scroll (Sticky Menu). Apabila anda mendapati masalah atau kesulitan silahkan tuangkan pada kolom komentar yang sudah di sediakan di bawah, saya akan mencoba membantu. Semoga bermanfaat ~

Tweet