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

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