Membuat Menu Melayang Setelah Discroll (Sticky Menu)

Membuat Sticky Menu - Pada tutorial terdahulu saya menjelaskan Cara Membuat Widget Melayang di Blog (Sticky Widget), saat ini saya akan berbagi bagaimana membuat 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 .nav).

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

• Demo

Memunculkan Menu Setelah DiSroll

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

<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': 'absolute', 'top':-9999, 'left':-9999 });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

• Demo

Resource : http://www.hongkiat.com/blog/css-sticky-position/ - http://www.zainalhakim.web.id/posting/membuat-menu-melayang-tetap-diatas.html