Menu Fixed Dengan CSS3 Dan jQuery

Membuat fixed pada menu dengan CSS dan jquery
saat di scroll ke bawah kali ini saya akan share dengan sedikit tutorial saja dari 1stwebdesigner. cara kerja dari tutorial ini adalah bagaimana menu yang awalnya di set di dalam header namun saat di scroll ke bawah menu tersebut akan diam di atas sampai akhir dan kembali ke semula jika mouse di kembalikan ke atas.
Untuk cara memasang pada blog hampir sama dengan tutorial saya pada menu navigation dengan efek easing.

Lihat Demo 

 Web Tutorial

 id="navi">
    


 id="menu" class="default">
        




            






 href="#">Home


            
 href="#">CSS

            
 href="#">Design

            
 href="#">Development

            
 href="#">Freebies

            
 href="#">Inspiration

            
 href="#">Resources
            
            
 href="#">Tutorials
            
            
 href="#">WordPress
            
        

#navi {
    margin-top: 50px;
}
#menu {
    background: #333;
    text-align: center;
    margin: 0 auto;
    padding: 0;
}
#content {
    width: 750px;
    margin: 0 auto;
    margin-bottom: 25px;
    padding: 30px 0;
    text-align: left;
}
ul {
    padding: 5px;
}
ul li {
    list-style-type: none;
    display: inline;
    margin-right: 15px;
}
ul li a {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000;
    padding: 3px 7px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    
    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}
ul li a:hover {
    background: #01458e;
    color: #ff0;

    -webkit-transition-property: color, background;
    -webkit-transition-duration: 0.5s, 0.5s;
}
.default {
    width: 850px;
    box-shadow: 0 0 2px #fff;
    -webkit-box-shadow: 0 0 2px #fff;
    -moz-box-shadow: 0 0 2px #fff;
}
.fixed {
    position: fixed;
    top: -5px;
    left: 0;
    width: 100%;
    border-bottom:1px solid #fff;
    box-shadow: 0 0 40px #222;
    -webkit-box-shadow: 0 0 40px #222;
    -moz-box-shadow: 0 0 40px #222;
}

<script type="text/javascript">
//<![CDATA[
$(function(){
    var menu = $('#menu'),
        pos = menu.offset();
        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            }else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });
});
//]]>
</script>

Share :