转载自前端开发

代码实现

先看看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;
  • }