html代码：
1 <div id="header"> 2 <h1>花瓣</h1> 3 </div><!--header--> 4 <div class="nav"> 5 <ul> 6 <li><a>关注</a></li> 7 <li><a>最新</a></li> 8 <li><a>最热</a></li> 9 <li><a>视频</a></li> 10 <li><a>家居</a></li> 11 <li><a>旅行</a></li> 12 </ul> 13 </div><!--nav-->
css代码：
1 body,h1,ul { 2 margin:0; 3 } 4 ul li { 5 list-style-type:none; 6 } 7 #header { 8 width:100%; 9 border-top:solid 1px #ccc; 10 border-bottom:solid 1px #ccc; 11 text-align:center; 12 } 13 h1 { 14 padding:10px 0; 15 color:#D74452; 16 } 17 .nav { 18 width:1000px; 19 background:#fff; 20 margin:20px auto 0; 21 border:solid 1px #ccc; 22 zoom:1; 23 border-radius:5px; 24 box-shadow:0 1px 6px rgba(0,0,0,0.1); 25 color:#D74452; 26 } 27 .nav_scroll { 28 position:fixed; 29 width:100%; 30 margin:0; 31 left:0; 32 top:0; 33 *position: absolute; 34 *top: expression(eval(document.documentElement.scrollTop)); 35 } 36 .nav:after { 37 content:""; 38 display:block; 39 height:0; 40 clear:both; 41 visibility:hidden; 42 } 43 .nav ul li { 44 float:left; 45 margin:0 20px; 46 height:30px; 47 line-height:30px; 48 } 49 .nav ul li a { 50 cursor:pointer; 51 } 52 .nav ul li a:hover { 53 text-decoration:underline; 54 }
js代码：
1 $(document).ready(function(){ 2 var topMain=$("#header").height()+20; //是头部的高度加头部与nav导航之间的距离。 3 var nav=$(".nav"); 4 $(window).scroll(function(){ 5 if ($(window).scrollTop()>topMain){ //如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除。 6 nav.addClass("nav_scroll"); 7 } 8 else 9 { 10 nav.removeClass("nav_scroll"); 11 } 12 }); 13 })
解决ie6下position:fixed失效的问题
ie6下使用position:absolute加top解决该问题。
代码如下：
1 .nav_scroll { 2 position:fixed; 3 width:100%; 4 margin:0; 5 left:0; 6 top:0; 7 *position: absolute; 8 *top: expression(eval(document.documentElement.scrollTop)); 9 }