JS跟随页面移动的div

来源:互联网 发布:acl拆分 源码 编辑:程序博客网 时间:2024/05/05 01:50
<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>


原创粉丝点击