导航条固定在顶部 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mini导航条</title>

<style type="text/css">
/*css reset*/
html{_background-image:url(n1othing.txt);/*解决IE6下固定条颤抖问题*/}
body, lu, li, p{
    padding: 0;
    margin: 0;
}
div{ display:block;}
lu, li{list-style: none;}


.header {
    background: #666;
    height: 800px;
}
.footer {
    height: 10000px;
    background: #09C;
}


.min_nav{ width:1000px; height:40px; margin:0 auto; background:#C30; clear:both;}
.ie7_bug{ text-align:left;}

.postion {
    /*position: relative;*/ width:100%;
}
.fix {
    position: fixed;
    _position: absolute;
    _top:expression(documentElement.scrollTop);
    top: 0;
    z-index: 10;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //var position_top=$('.bd').position();
    
    var offset_top=$('.postion').offset();
    var scrollTop_top=$('.postion').scrollTop();

 window.onscroll = function () {
        if ($(document).scrollTop() > offset_top.top) {
            $('.postion').addClass('fix');
        }
        else {
            $('.postion').removeClass('fix');
        }
    }        
 });
</script>
</head>

<body>
<div class="header">
  <ul>
    <li>aaaaaaaaaaaaaaa</li>
    <li>aaaaaaaaaaaaaaa</li>
    <li>aaaaaaaaaaaaaaa</li>
    <li>aaaaaaaaaaaaaaa</li>
    <li>aaaaaaaaaaaaaaa</li>
  </ul>
</div>

<div class="postion">
    <div class="min_nav">
        <p>获取匹配元素相对父元素的偏移。</p>
        <p>返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。</p>
      </div>
</div>

<div class="footer"></div>
</body>
</html>

 

posted @ 2013-07-16 09:56  沉睡的泰坦尼克  阅读(609)  评论(0)    收藏  举报