ie6固定定位层fixed
转文请标明 --- 出处：穆乙 http://www.cnblogs.com/pigtail/
固定头部或者左侧导航现在网站中随处可见，主要是为了提高用户体验；以及右下角的固定广告，页面两侧的固定广告。
这些实现起来其实并不困难，都基于一个属性：position:fixed;是可惜IE6不支持；只能退而求其次利用其它办法，比如利用js监听window的resize和scroll事件，重置位置。
实现起来也很简单，主要是scrollLeft或者scrollTop以及可视窗口高度来定位。但这些都有一个问题好就是会出现“震动”。
所以，又出现另外一种解法，就是利用Internet Explorer的CSS表达式(expression),这同样有问题就是性能问题。众所周知，expression的性能是被人们所诟病的。
但为了达到目的不妨用一用。但可惜的是同样会出现震动，但这个震动是可以解决的。
解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。
因为是在重画之前处理CSS，它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素！
具体的信息可以看这里：
http://www.qianduan.net/fix-ie6-dont-support-position-fixed-bug.html
我这里只是根据这个原理，把整个应用封装成了一个函数：
下面是一个应用demo:
转文请标明 --- 出处：穆乙 http://www.cnblogs.com/pigtail/
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>固定层</title>
<styletype="text/css">
body{padding:0;margin:0;height:1200px}
.lefttop{width:100px;height:100px;background:#960;display:none}
.leftbtm{width:100px;height:100px;background:#609;display:none}
.righttop{width:100px;height:100px;background:#906;display:none}
.rightbtm{width:100px;height:100px;background:#690;display:none}
</style>
</head>
<body>
<divclass="lefttop" id="block1"></div>
<divclass="leftbtm" id="block2"></div>
<divclass="righttop" id="block3"></div>
<divclass="rightbtm" id="block4"></div>
<script>
function Fixed(fid, pos) {
var ie6= /MSIE\s+6\.0/.test(navigator.userAgent);
var id= fid;
fid= fid== undefined?
document.createElement('div')
:typeof fid=== "string" ?
document.getElementById(fid)
: fid.nodeType&& fid;
pos= pos|| {
"left" :"auto",
"right" :"0",
"top" :"auto",
"bottom" :"0"
};
if (!ie6) {
fid.style.cssText= "display:block;position:fixed;z-index:999;left:" + pos['left']+
";right:" + pos['right']+
";top:" + pos['top']+
";bottom:" +
pos['bottom']+ ";";
}else {
fid.style.cssText= "display:block;position:absolute;z-index:999;";
document.getElementsByTagName('html')[0].style.cssText= "background-image:url(about:blank);background-attachment:fixed;";
var mystyle= document.getElementById('ie6StyleSheetFixedId')|| (function(){
var mystyle= document.createElement("style");
mystyle.type= "text/css";
mystyle.id= "ie6StyleSheetFixedId";
return mystyle;
})();
var left= pos['left']?
"left:expression(eval(document.documentElement.scrollLeft+" + parseInt(pos['left']|| 0)+ "))"
:"left:auto",
right= pos['right']?
"left:expression(eval(document.documentElement.scrollLeft + document.documentElement.clientWidth - this.offsetWidth -" + parseInt(pos['right']|| 0)+ "))"
:"right:auto",
top= pos['top']?
"top:expression(eval(document.documentElement.scrollTop+" + parseInt(pos['top']|| 0)+ "))"
:"top:auto",
bottom= pos['bottom']?
"top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight -" + parseInt(pos['bottom']|| 0)+ "))"
:"bottom:auto";
mystyle.styleSheet.addRule("#" + id, left+ ";" + right+ ";" + top+ ";" + bottom+ ";",0);
document.getElementsByTagName("head")[0].appendChild(mystyle);
}
}
Fixed("block1", {
left :"0px",
top :"0px"
});
Fixed("block2", {
left :"0px",
bottom :"0px"
});
Fixed("block3", {
right :"0px",
top :"0px"
});
Fixed("block4", {
right :"0px",
bottom :"0px"
});
</script>
</body>
</html>
运行效果图如下：
这里截图用的firefox,经验证 IE6通过，其它浏览器利用的是position:fixed无需验证！
