类似美丽说，类似百度旅游，类似sae导航菜单随动效果

先看类似的效果效果：

http://www.36ria.com/demo/css3-menu/#

http://www.emeite.net/index.php?m=search

原理：当scrollTop>菜单上面代码高度的时候给导航加个新的class 控制它的位置反之，删除刚才加的class 让导航回到默认的class

首先，这是你的菜单代码

<p>aa</p><p>aa</p><p>aa</p>
<div id="menu" class="default">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">jquery</a>
</li>
<li>
<a href="#">设计</a>
</li>
<li>
<a href="#">flex</a>
</li>
<li>
<a href="#">air</a>
</li>
<li>
<a href="#">ajax</a>
</li>
<li>
<a href="#">html5</a>
</li>
<li>
<a href="#">css3</a>
</li>
<li>
<a href="#">WordPress</a>
</li>
</ul>
</div>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p><p>aa</p>

定义他的样式

<style>
body{
	margin:0;
}
#menu {
    background: url("http://sae.sina.com.cn/static/image/menu_bg.png") repeat-x scroll 0 0 transparent;
    height: 45px;
	width: 100%;
	text-align: center;
	margin: 0;
}
.default {
    box-shadow: 0 5px 20px #888888;
    height: 50px;
    width: 850px;
}
.fixed {
    box-shadow: 0 0 40px #222222;
    left: 0;
    position: fixed;
    top: -5px;
    width: 100%;
}
ul li {
    display: inline;
    list-style-type: none;
    margin-right: 15px;
}
</style>

写个js，实现滚动后出现的功能

<script type="text/javascript">
$(function(){
var menu = $('#menu');
pos = menu.offset();alert(menu.height());
$(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>

FEATURED TAGS

FRIENDS