Creating Menu Floating After Scrollable (Sticky Navigation)

Creating Menu Floating After Scrollable (Sticky Navigation) - This time I will share how to make Sticky Navigation Menu in blogger. By creating sticky navigation, of course, will allow visitors to explore your blog without having to go up and down to scrolled its mouse. For apply please see tutorial below.
 
#1st way. Sticky Navigation was originally going to look normal, but will float (fixed) when the mouse is scrolling down.
Save this code before or above the </ body> and specify its css code selector (at the script below i'm apply .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>

OR

#2nd way. Bring up the menu only if mouse is scrolling
If you want to bring up the menu only after the mouse is scrolling, then use this code:

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

keyword : Menu Floating Scroll Sticky Navigation

blogging blogging tutorial