Fixed menu with CSS3 and jQuery
Creating fixed on the menu with CSS and jQuery when scroll down this time I will share it with a little tutorial from 1stwebdesigner. The workings of this tutorial is how the menu that was originally set in the header but when scroll down the menu it will stay at the top until the end and return to normal when the mouse back to the top
HTML
<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 -->
CSS
#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;
}
Javascript / jQuery
<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>
