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