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>