JQuery Mobile+JS实现智能浮动定位导航条

实现原理

  主要用到几个知识点:

原理:
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>
原文地址:https://www.cnblogs.com/LO-ME/p/3707737.html