JS跟随页面移动的div

最新推荐文章于 2024-07-26 03:34:02 发布

原创最新推荐文章于 2024-07-26 03:34:02 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

19 篇文章

订阅专栏

这段代码定义了一个scrollDiv函数，用于实现div元素随着页面滚动而固定在屏幕上的效果。它通过监听window的onscroll事件，判断div的当前位置是否超过预设值，从而切换div的样式。当滚动超过指定位置时，div会设置为position: fixed并固定在顶部；否则，移除此样式。代码还包含了兼容IE6的处理，并提供了获取元素位置的辅助函数。

<script type="text/javascript">
         /*
         divID = 元素id
         fistTop = 元素起始位置
         */
         function scrollDiv(divID, fistTop) {
             this.fistTop = fistTop;
             this.onscroll(divID);
         }

         scrollDiv.prototype = {
             $: function (id) { return document.getElementById(id) },

             timer: "", //定时器

             onscroll: function (divID) {
                 var that = this;
                 window.onscroll = function () {
                     clearTimeout(that.timer);
                     that.timer = setTimeout(function () {
                         that.sDiv(divID)
                     }, 50);
                 }

             },

             sDiv: function (divID) {
                 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                 if (!!window.ActiveXObject && !window.XMLHttpRequest) {  //ie6

                     if (scrollTop >= this.fistTop) {
                         this.$(divID).className = "active";//设置CSS的position: fixed
                         this.$(divID).style.top = scrollTop + "px";
                     } else {
                         // this.$(divID).className = "pop";
                     }

                 } else {  //其它浏览器
                     scrollTop >= this.fistTop ? this.$(divID).className = "active" : this.$(divID).className = "pop";
                 }

             },

             getPosition: function (obj) {  //获取元素的位置
                 var top = 0,
                     left = 0,
                     width = obj.offsetWidth,
                     height = obj.offsetHeight;
                 while (obj.offsetParent) {
                     top += obj.offsetTop;
                     left += obj.offsetLeft;
                     obj = obj.offsetParent;
                 }
                 return { "top": top, "left": left, "width": width, "height": height };
             }

         }

         var myDiv = new scrollDiv("left-column", 100);//开始调用

   </script>

 <style type="text/css">
   .active{position: fixed;_position:absolute;display: block;margin: 0;top:0}
   </style>