CARA MUDAH MEMBUAT STICKY MENU (MENU MELAYANG SETELAH DI SCROLL KE BAWAH)

Setelah kemarin saya memosting Cara Membuat Site Map Keren , hari ini saya akan menunjukkan bagaimana cara membuat Sticky Menu . Sticky Menu adalah menu melayang setelah di Scroll ke bawah . Ini berfungsi agar pembaca mudah untuk menuju ke Homepage atau menu-menu lainnya . Jika kita perhatikan , Lebih baik kita menggunakan Sticky Menu dibanding Floating Menu . Silakan Klik untuk melihat contohnya dan coba scroll ke bawah . Sangat keren bukan,... Cara-Caranya juga tidak begitu sulit . Mari kita praktekkan,...

Sebelum Scroll ke Bawah

Setelah Scroll ke Bawah

Berikut langkah-langkahnya dan coba praktekkan :

1. Login ke akun Blogger anda
2. Klik Template seperti pada gambar
   
3. Pilih Edit HTML seperti pada gambar
   
4. Cari kode </body> (gunakan Ctrl+F untuk mempermudah pencarian) 
5. Copy kode berikut dan Paste tepat diatas kode </body> dan jangan lupa untuk di Save                                                                  

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

    // Menentukan elemen yang dijadikan sticky yaitu #top-wrapper

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

    var stickyNav = function(){

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

        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        

        if (scrollTop > stickyNavTop) { 

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

        } else {

            $('#top-wrapper').css({ 'position': 'relative' });

        }

    };

    // Jalankan fungsi

    stickyNav();

    $(window).scroll(function() {

        stickyNav();

    });

});

//]]>

</script>

Ket : Warna merah bisa diganti sesuai apa yg diinginkan (professional) bisa diganti dengan : header-wrapper , .nav , navigation , dll .

Sekarang liat blog anda , sungguh keren kan ? Demikian post saya mengenai Sticky Menu . Semoga bermanfa'at . Apabila ada pertanyaan , silakan tulis di komentar atau melalui Fb yg sudah tertera diatas,....

 Terima kasih sudah membaca blog saya,.....

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: