Cara Membuat Sticky Menu Melayang di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Cara Membuat Menu Melayang (Sticky Menu) di Blog - Sebelumnya saya sudah memberi tutorial Cara Membuat Sticky Widget di Sidebar blog dan sekarang saya akan memberikan tutorial yang juga dinamakan (Sticky) atau mengikuti, yang bernama Sticky Menu 

Dengan membuat sticky menu, tentunya akan memudahkan pengunjung mengeksplor blog sobat tanpa harus naik turun scroll. Sticky Menu ini awalnya akan terlihat normal, tetapi akan melayang (fixed) ketika mouse discroll ke bawah.

Simpan kode ini di atas </body> dan tentukan selectornya (pada script dibawah saya aplikasikan pada#header-wrapper).

<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>

DEMO

Memunculkan Menu Setelah di Scroll

Apabila ingin memunculkan menu hanya setelah discroll, gunakan kode ini :

<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>

DEMO

Itulah Tutorial ''Cara Membuat Sticky Menu Melayang di Blog'' jangan lupa follow dan pasang banner/link Exchange disini -------  ( Glade Lands ) -------

 Source : http://blog.kangismet.net/2013/11/membuat-menu-melayang-setelah-discroll.html