fixPosition固定div位置（跨浏览器浮动定位）

最新推荐文章于 2024-07-16 15:17:26 发布

sohighthesky

最新推荐文章于 2024-07-16 15:17:26 发布

阅读量1.1w

点赞数

文章标签： div 浏览器 function timer string xhtml

本文链接：https://blog.csdn.net/sohighthesky/article/details/4754184

版权

在IE Tester V0.4.1 IE6/+,Firefox3.5,Chrome3.0,Opera 9.64以及Safari4.0.3下测试通过

点击运行示例

代码（看着可能比较多，大部分是在处理兼容ie6）：

/* *author:sohighthesky *From:http://www.uedsky.com/ *Date:2009-11-1 */ /* *target 要固定的元素对象，也可以是元素的id *pos:object/string 指定固定到的位置，类型为object时，使用json方式如{right:200,bottom:50} ，为string时可选参数如下： *cc,正中间,lc 左边,rc 右边 *lt 左上角,ct 上边,rt 右上角 *lb 左下角,cb 底部,rb 右下角 */ var fixPosition=function(target,pos) { this.target= this.g(target); this.pos=pos; this.init();// }; fixPosition.prototype={ isScroll:navigator.userAgent.indexOf("MSIE 6")!=-1 ||(window.ActiveXObject && document.compatMode!="CSS1Compat"), ae:function(e,call) { if(window.addEventListener) window.addEventListener(e,call,false); else window.attachEvent("on"+e,call); }, g:function(id) { return typeof(id)=="string"?document.getElementById(id):id; }, setPos:function() {//设置位置 var de; if(document.compatMode=="CSS1Compat")de=document.documentElement; else de=document.body; if(typeof(this.pos)=="string") {// if(!this.isScroll){ switch(this.pos.charAt(0)) { case "l": this.target.style.left="0px"; break; case "r": this.target.style.right="0px"; break; default: this.target.style.left=(de.clientWidth-this.target.clientWidth)/2 +"px"; break; } switch(this.pos.charAt(1)) { case "t": this.target.style.top="0px"; break; case "b": this.target.style.bottom="0px"; break; default: this.target.style.top=(de.clientHeight-this.target.clientHeight)/2 +"px"; break; } }else { switch(this.pos.charAt(0)) { case "l": this.target.style.left=de.scrollLeft+"px"; break; case "r": this.target.style.left=de.scrollLeft+de.clientWidth-this.target.clientWidth +"px"; break; default: this.target.style.left=de.scrollLeft+((de.clientWidth-this.target.clientWidth)/2)+"px"; break; } switch(this.pos.charAt(1)) { case "t": this.target.style.top=de.scrollTop+"px"; break; case "b": this.target.style.top=de.scrollTop+de.clientHeight-this.target.clientHeight+"px"; break; default: this.target.style.top=de.scrollTop+((de.clientHeight-this.target.clientHeight)/2)+"px"; break; } } } else { if(!this.isScroll) { for(var p in this.pos) this.target.style[p]=this.pos[p]+"px"; } else { for(var p in this.pos) { switch(p.toLowerCase()) { case "left": this.target.style.left=de.scrollLeft+this.pos[p]+"px"; break; case "right": this.target.style.left=de.scrollLeft+de.clientWidth-this.target.clientWidth-this.pos[p]+"px"; break; case "top": this.target.style.top=de.scrollTop+this.pos[p]+ "px"; break; case "bottom": this.target.style.top=de.scrollTop+de.clientHeight-this.target.clientHeight-this.pos[p]+"px"; break; } } } } }, init:function() { if(!this.pos) throw Error("Invalid arguments [pos]."); if(!this.isScroll) this.target.style.position="fixed"; else this.target.style.position="absolute"; var timer,o=this; this.ae("resize",function() {//支持fixed的浏览器窗体大小改变时也重置位置，防止中间无法居中 clearTimeout(timer); timer=setTimeout(function() { o.setPos(); },30); }); if(this.isScroll) {//滚动 this.ae("scroll",function() { clearTimeout(timer); timer=setTimeout(function() { o.setPos(); },30); }); } this.setPos(); } } /* *强烈建议您的页面加上w3c的dtd */

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>固定元素位置</title> <style type="text/css"> body,th,td {font-size:10pt;font-family:Tahoma,Arial,'/5b8b/4f53','/5FAE/8F6F/96C5/9ED1';} a {color:#3366CC; text-decoration:none;} #div1 div { width:300px; height:140px; border:solid 1px #0066CC; text-align:center; vertical-align:middle; line-height:1.8; } </style> </head> <body> <div id="div1" style="height:2000px;width:2000px"> <div pos="cc">author:<a href="http://hi.csdn.net/sohighthesky">sohighthesky</a><br/> Date:2009-11-1 </div> <div pos="lt">左上角</div> <div pos="ct">上边 </div> <div pos="rt">右上角 </div> <div pos="lc">左边</div> <div pos="rc">右边</div> <div pos="lb">左下角</div> <div pos="cb">下边</div> <div pos="rb">右下角</div> <div>自定义位置1:{left:60,top:160}</div> <div>自定义位置2:{right:200,bottom:50}</div> </div> </body> <script type="text/javascript" src="fixPosition.js"></script> <script type="text/javascript"> var divs=document.getElementById("div1").getElementsByTagName("div"); var length=divs.length; for(var i=0;i<length-2;i++) { var cur=divs[i]; new fixPosition(cur,cur.getAttribute("pos")); } new fixPosition(divs[length-2],{left:60,top:160}); new fixPosition(divs[length-1],{right:200,bottom:50}); </script> </html>

另外还可以参考：http://www.caihong.cc/?p=119