<!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>
