Cara Membuat Sticky Menu Di Blog

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

1. Masuk ke Edit HTML
2. Cari (CTRL+F) kode </body>
3. Copy kode berikut ini dan Paste di atas kode </body>

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

Memunculkan Menu Setelah Discroll

Apabila sobat ingin memunculkan menu hanya setalah discroll maka gunakan kode berikut

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu #header-wrapper
    var stickyNavTop = $('#header-wrapper').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('#header-wrapper').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#header-wrapper').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Cara Membuat Sticky Menu Di Blog 2016-04-13T22:16:00+07:00 Rating: 4.5 Diposkan Oleh: Unknown