实现原理
主要用到几个知识点：
原理：
1，浏览器向下滚动时，当document的scrollTop大于浮动层离窗口顶部的距离时，就让浮动层的position属性设为fixed定位，脱离文档流
2，浏览器向上滚动时，当document的scrollTop小于浮动层离窗口顶部的距离时，就让浮动层的position属性设为static定位，回归文档流
代码实现
先看看html和css代码，很简单
<!doctype html> <html> <head> <meta charset="utf-8"> <title>float_nav</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>HEADER</h1> </div> <div data-role="navbar" id="nav"> <ul> <li><a href="#">Section 1</a></li> <li><a href="#">Section 2</a></li> <li><a href="#">Section 3</a></li> <li><a href="#">Section 4</a></li> <li><a href="#">Section 5</a></li> </ul> </div> <div data-role="content"> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /> </div> </div> </body> </html>
下面是js代码
1，先写一个获取元素距离顶部距离的函数 原理很简单，通过递归检查是否存在父元素，累加起来得到距离值
function getTop(e){ var offset = e.offsetTop; if(e.offsetParent != null) offset += getTop(e.offsetParent); return offset; } })();
2，我们接着写js代码
//先把浮动层对象存在一个变量中，方便后面调用 var obj = document.getElementById("nav");//b为漂浮层的id //获取浮动层元素离窗口顶部的距离 var top = getTop(obj);
3，接下来最重要的，给窗口绑定滚动事件
window.onscroll = function(){ //获取窗口的scrollTop var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (bodyScrollTop > top){ /*当窗口的滚动高度大于浮动层距离窗口顶部的距离时，也就是原理中说的第一种情况 *我们把这个浮动层position值设为fixed，top值设为0px，让它定位在窗口顶部*/ obj.style.position = "fixed"; obj.style.top = "0px"; obj.style.width="100%"; } else { /*当窗口的滚动高度小于浮动层距离窗口顶部的距离时，也就是原理中说的第一种情况 *我们把这个浮动层position值设为static或为空，让它回归文档流 *让它回到原来的位置上去*/ obj.style.position = "static"; } }
有的人的使用的是IE6浏览器,IE6不支持fixed.fixed是定位在窗口顶部，是相对于窗口，如果我们让元素通过position:absolute相对于body定位，top设为body的scrollTop值，也就可以在IE6中模拟fixed了
4，兼容IE6..首先在前面加上判断浏览器是否是IE6的语句
//判断浏览器是否是IE6 var isIE6 = /msie 6/i.test(navigator.userAgent);
再来改动下窗口滚动事件绑定的函数的两句
//...... if (bodyScrollTop > top){ //如果是IE6，就设置position为absolute，否则设为fixed obj.style.position = (isIE6) ? "absolute" : "fixed"; //如果是IE6，就设置top值为bodyScrollTop，否则top为0 obj.style.top = (isIE6) ? bodyScrollTop + "px" : "0px"; } else { //......
js完整代码如下：(将js代码放在body里面的最底下)
<script type="text/javascript"> (function(){ var obj = document.getElementById("nav"); var top = getTop(obj); var isIE6 = /msie 6/i.test(navigator.userAgent); window.onscroll = function(){ var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (bodyScrollTop > top){ obj.style.position = (isIE6) ? "absolute" : "fixed"; obj.style.top = (isIE6) ? bodyScrollTop + "px" : "0px"; obj.style.width="100%"; } else { obj.style.position = "static"; } }; function getTop(e){ var offset = e.offsetTop; if(e.offsetParent != null) offset += getTop(e.offsetParent); return offset; } })(); </script>