智能浮动定位一般用做工具条啥的，你可以看看在淘宝上的应用

我们今天也来做一个，js实现智能浮动定位实例

实现原理

其实很简单，主要用到几个知识点：

原理：
1，浏览器向下滚动时，当document的scrollTop大于浮动层离窗口顶部的距离时，就让浮动层的position属性设为fixed定位，脱离文档流
2，浏览器向上滚动时，当document的scrollTop小于浮动层离窗口顶部的距离时，就让浮动层的position属性设为static定位，回归文档流

代码实现

先看看html和css代码，很简单


<div id="inner">

 
  我是智能浮动层，往下拖动滚动条，我永远在这里<br />

 
  往上拖动滚动条，我又回来了
 
</div>


#inner{

 
    width: 300px;
 
    height: 100px;
 
    padding: 8px;
 
    line-height: 22px;
 
    text-align:justify;
 
    color: #000000;
 
    border:1px solid #ffecb0;
 
    background:rgba(255,254,224,.7);
 
    box-shadow:2px 2px 7px rgba(0,0,0,.2);/*阴影*/

 
    border-radius: 4px; /*圆角*/

 
}


下面是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("inner"); //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";

 
    } else {

 
    /*当窗口的滚动高度小于浮动层距离窗口顶部的距离时，也就是原理中说的第一种情况

 
    *我们把这个浮动层position值设为static或为空，让它回归文档流
 
    *让它回到原来的位置上去*/
 
    obj.style.position = "static";

 
    }

 
}


怎么样，现在是不是有的人已经实现效果了，但有的人的使用的是IE6浏览器，靠，超毛，在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 {

 
//......


现在看看怎么样，IE6也兼容了吧，搞定

js实现智能浮动定位实例

js完整代码如下：

var obj = document.getElementById("inner");

 

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";

 
    } else {

 
        obj.style.position = "static";

 
    }

 
}
 

function getTop(e){

 
    var offset = e.offsetTop;

 
    if(e.offsetParent != null) offset += getTop(e.offsetParent);

 
    return offset;

 
}