Belajar Bisnis Online Gratis Bagi Pemula: Membuat Menu Melayang atau Sticky Navigation

Membuat Menu Melayang (Sticky Navigation) Pada Blog - Dengan membuat Sticky Navigation Menu ini, maka tentu akan sangat membantu dan memungkinkan pengunjung untuk mengeksplorasi blog Anda tanpa harus ribet-ribet scroll naik turun dengan mousenya, karena menu navigasi pada blog anda akan terus lengket menempel dilayar meski di scroll kebawah sejauh apapun. Untuk menerapkannya silakan ikuti tutorial di bawah ini.

Cara 1. Sticky Navigation awalnya akan terlihat normal, tetapi akan melayang ketika di scroll ke bawah.

Caranya: Simpan kode ini sebelum atau di atas </ body> dan tentukan elemen kode css menu navigasi pada blog anda (misalnya dalam script di bawah ini elemen menu navigasi saya diwakili dengan kode css .nav)

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Determine which element that to be created sticky, is .nav
    var stickyNavTop = $('.nav').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Conditions when scrolling the navigation menu will always be on above, and vice versa        
        if (scrollTop > stickyNavTop) { 
            $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.nav').css({ 'position': 'relative' });
        }
    };
    // Execute function
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

<>

atau

Cara 2. Memunculkan menu hanya jika mouse di scroll

Jika Anda ingin menampilkan menu hanya setelah di scroll, maka gunakan kode ini:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Determine which element that to be created sticky, is .nav
    var stickyNavTop = $('.nav').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Conditions when scrolling the navigation menu will always be on above, and vice versa        
        if (scrollTop > stickyNavTop) { 
            $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.nav').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
        }
    };
    // Execute function
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>