
Half work is done then add a new class in your css and create a jquery function. This function performs all magic. It checks the web page position and as per requirment switches between two css classes of navigation bar.
Sounds interesting take a look at its jquery function.
You may Download the whole code.
Jquery Code:
$(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'); }); } }); });
Image Before Scrolling:
Image After scroll down:
Css Code:
#navi { height: 50px; margin-top: 50px; } #menu { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1)); background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; line-height: 50px; 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: 0; } 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; height: 50px; box-shadow: 0 5px 20px #888; -webkit-box-shadow: 0 5px 20px #888; -moz-box-shadow: 0 5px 20px #888; } .fixed { position: fixed; top: -5px; left: 0; width:100%; height:60px; box-shadow: 0 0 40px #222; -webkit-box-shadow: 0 0 40px #222; -moz-box-shadow: 0 0 40px #222; }Html Code:
<body> <div id="navi"> <div id="menu" class="default"> <ul> <li><a href="#">Home</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Design</a></li> <li><a href="#">Development</a></li> <li><a href="#">Freebies</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Resources</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">WordPress</a></li> </ul> </div><!-- close menu --> </div><!-- close navi -->
Hope you will like this post.
Comments
Post a Comment
your Comment is sent for moderation, Thankyou