Membuat Menu Ikut Turun Setelah Discroll (Sticky Menu)

Dengan membuat sticky menu, tentunya akan memudahkan pengunjung mengeksplor blog lo 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 di 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>

Demikian artikel Membuat Menu Ikut Turun Setelah Discroll (Sticky Menu). Semoga artikel ini dapat berguna dan bermanfaat bagi lo yang membutuhkan. Jika ada yang kurang jelas silahkan komentar dikolom komentar dibawah atau bisa langsung hubungi Nugra Wahyu / @nugrawahyu