仿花瓣标题栏始终在页面顶部（ie6下position:fixed失效解决方法）

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 }

转载于:https://www.cnblogs.com/misaki/p/3156505.html