JS跟随页面移动的div

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


你可能感兴趣的:(JS跟随页面移动的div)