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

ejacky

代码（看着可能比较多，大部分是在处理兼容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>



via sohighthesky