在IE Tester V0.4.1 IE6/+,Firefox3.5,Chrome3.0,Opera 9.64以及Safari4.0.3下測試通過
點擊運行樣本
代碼（看著可能比較多，大部分是在處理相容ie6）：
/*<br /> *author:sohighthesky<br /> *From:http://www.uedsky.com/<br /> *Date:2009-11-1<br /> */<br />/*<br /> *target 要固定的元素對象，也可以是元素的id<br /> *pos:object/string 指定固定到的位置，類型為object時，使用json方式如{right:200,bottom:50} ，為string時選擇性參數如下：<br /> *cc,正中間,lc 左邊,rc 右邊<br /> *lt 左上方,ct 上邊,rt 右上方<br /> *lb 左下角,cb 底部,rb 右下角<br /> */<br />var fixPosition=function(target,pos) {<br /> this.target= this.g(target);<br /> this.pos=pos;<br /> this.init();//<br />};</p><p>fixPosition.prototype={<br /> isScroll:navigator.userAgent.indexOf("MSIE 6")!=-1 ||(window.ActiveXObject && document.compatMode!="CSS1Compat"),<br /> ae:function(e,call) {<br /> if(window.addEventListener)<br /> window.addEventListener(e,call,false);<br /> else<br /> window.attachEvent("on"+e,call);<br /> },<br /> g:function(id) {<br /> return typeof(id)=="string"?document.getElementById(id):id;<br /> },<br /> setPos:function() {//設定位置<br /> var de;<br /> if(document.compatMode=="CSS1Compat")de=document.documentElement;<br /> else de=document.body;</p><p> if(typeof(this.pos)=="string") {//<br /> if(!this.isScroll){<br />switch(this.pos.charAt(0)) {<br />case "l":<br />this.target.style.left="0px";<br />break;<br />case "r":<br />this.target.style.right="0px";<br />break;<br />default:<br />this.target.style.left=(de.clientWidth-this.target.clientWidth)/2 +"px";<br />break;<br />}<br />switch(this.pos.charAt(1)) {<br />case "t":<br />this.target.style.top="0px";<br />break;<br />case "b":<br />this.target.style.bottom="0px";<br />break;<br />default:<br />this.target.style.top=(de.clientHeight-this.target.clientHeight)/2 +"px";<br />break;<br />}<br />}else {<br />switch(this.pos.charAt(0)) {<br />case "l":<br />this.target.style.left=de.scrollLeft+"px";<br />break;<br />case "r":<br />this.target.style.left=de.scrollLeft+de.clientWidth-this.target.clientWidth +"px";<br />break;<br />default:<br />this.target.style.left=de.scrollLeft+((de.clientWidth-this.target.clientWidth)/2)+"px";<br />break;<br />}<br />switch(this.pos.charAt(1)) {<br />case "t":<br />this.target.style.top=de.scrollTop+"px";<br />break;<br />case "b":<br />this.target.style.top=de.scrollTop+de.clientHeight-this.target.clientHeight+"px";<br />break;<br />default:<br />this.target.style.top=de.scrollTop+((de.clientHeight-this.target.clientHeight)/2)+"px";<br />break;<br />}<br />}<br /> } else {<br /> if(!this.isScroll) {<br /> for(var p in this.pos)<br /> this.target.style[p]=this.pos[p]+"px";<br /> } else {<br /> for(var p in this.pos) {<br /> switch(p.toLowerCase()) {<br /> case "left":<br /> this.target.style.left=de.scrollLeft+this.pos[p]+"px";<br /> break;<br /> case "right":<br /> this.target.style.left=de.scrollLeft+de.clientWidth-this.target.clientWidth-this.pos[p]+"px";<br /> break;<br /> case "top":<br /> this.target.style.top=de.scrollTop+this.pos[p]+ "px";<br /> break;<br /> case "bottom":<br /> this.target.style.top=de.scrollTop+de.clientHeight-this.target.clientHeight-this.pos[p]+"px";<br /> break;<br /> }<br /> }<br /> }<br /> }<br /> },<br /> init:function() {<br /> if(!this.pos)<br /> throw Error("Invalid arguments [pos].");<br /> if(!this.isScroll)<br /> this.target.style.position="fixed";<br /> else<br /> this.target.style.position="absolute";<br /> var timer,o=this;<br /> this.ae("resize",function() {//支援fixed的瀏覽器表單大小改變時也重設位置，防止中間無法置中<br /> clearTimeout(timer);<br /> timer=setTimeout(function() {<br /> o.setPos();<br /> },30);<br /> });<br /> if(this.isScroll) {//滾動<br /> this.ae("scroll",function() {<br /> clearTimeout(timer);<br /> timer=setTimeout(function() {<br /> o.setPos();<br /> },30);<br /> });<br /> }<br /> this.setPos();<br /> }<br />}<br />/*<br /> *強烈建議您的頁面加上w3c的dtd<br /> */
範例程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /> <title>固定元素位置</title><br /> <style type="text/css"><br /> body,th,td {font-size:10pt;font-family:Tahoma,Arial,'/5b8b/4f53','/5FAE/8F6F/96C5/9ED1';}<br /> a {color:#3366CC; text-decoration:none;}<br /> #div1 div {<br />width:300px;<br />height:140px;<br />border:solid 1px #0066CC;<br />text-align:center;<br />vertical-align:middle;<br />line-height:1.8;<br /> }<br /> </style><br /></head><br /><body><br /><div id="div1" style="height:2000px;width:2000px"><br /><div pos="cc">author:<a href="http://hi.csdn.net/sohighthesky">sohighthesky</a><br/><br />Date:2009-11-1<br /></div><br /><div pos="lt">左上方</div><br /><div pos="ct">上邊</div><br /><div pos="rt">右上方</div><br /><div pos="lc">左邊</div><br /><div pos="rc">右邊</div><br /><div pos="lb">左下角</div><br /><div pos="cb">下邊</div><br /><div pos="rb">右下角</div><br /><div>自訂位置1:{left:60,top:160}</div><br /><div>自訂位置2:{right:200,bottom:50}</div><br /></div><br /></body><br /><script type="text/javascript" src="fixPosition.js"></script><br /><script type="text/javascript"><br />var divs=document.getElementById("div1").getElementsByTagName("div");<br />var length=divs.length;<br />for(var i=0;i<length-2;i++) {<br />var cur=divs[i];<br />new fixPosition(cur,cur.getAttribute("pos"));<br />}<br />new fixPosition(divs[length-2],{left:60,top:160});<br />new fixPosition(divs[length-1],{right:200,bottom:50});<br /></script><br /></html>
另外還可以參考：http://www.caihong.cc/?p=119
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
