导航头部固定jQuery代码

鼠标滑动，nav固定效果~代码如下：

JQ:

<script type="text/javascript" src="jquery-1.7.2.js" ></script>
<script type="text/javascript">
$(function(){
var headerHeight=$(".header").height()+10; //获取头部高度
var nav=$(".show"); //或许需要显示的div
$(window).scroll(function(){ //绑定一个滚动事件
if($(this).scrollTop()>headerHeight){ //如果当前的滚动的高度>头部高度
nav.css("display","block"); //就显示nav div
}else{ //否则 隐藏 可以是css display 也可以addClass（） 两种都可以
nav.css("display","none");
}
})
});

</script>

Html和CSS

<style type="text/CSS">
*{ margin:0; padding:0;}
body{ _background-attachment:fixed; _background-image:url(about:blank);}/*实现IE6不兼容fixed闪动问题*/
.header{ width:1000px; height:150px; margin:0 auto; background:red;}
.nav{ height:30px; width:1000px; margin:0 auto; background:#ccc; margin-top:20px;}
.nav ul li{ list-style:none; float:left; display:block; padding:0 20px; line-height:30px;}
.show{ display:none; width:1000px; margin-left:13%; position:fixed; _position:absolute;_top:0; top:0; left:0; background:#ccc;background: rgba(255, 255, 255, 0.7) !important; /* IE无效，FF有效 */filter: alpha(opacity=70);_position:absolute; top:expression((offsetParent.scrollTop)+0); z-index:999; }
.show ul li{ list-style:none; float:left; display:block; padding:0 20px; line-height:30px;}
</style>

<div class="header"></div>
<div class="nav">
<ul>
<li>fsdfsd</li>
<li>fsdfsd</li>
<li>fsdfsd</li>
<li>fsdfsd</li>
</ul>
</div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>

<div class="show">
<ul>
<li>fsdfsd</li>
<li>fsdfsd</li>
<li>fsdfsd</li>
<li>fsdfsd</li>
</ul>
</div>