ie fixed
众所周知,IE6不支持fixed属性。常用的方法是JS进行处理。会出现跳动现象,网上的解决方案是为html或者body添加background-image:about(blank);或background-attachment:fixed;我们直接用expression貌似不行,后来发现是缓存导致的,解决方案是使用:eval();
套用了下,不错的。
各个位置算法如下:
左上角:left:document.documentElement.scrollLeft;top:document.documentElement.scrollTop;
left:等于scrollLeft,
top:也直接等于scrollTop.
右上角:top:document.documentElement.scrollTop;left:document.documentElement.clientWidth+document.documentElement.scrollLeft - (parseInt(this.currentStyle.marginLeft,10)||0) - (parseInt(this.currentStyle.marginRight,10)||0)-this.offsetWidth;
top:还是直接等于scrollTop,
left:滚动左边距(scrollLeft)+浏览器宽度(clientWidth)-本身宽度(offsetWidth)-本身左边距(marginLeft)-本身右边距(marginRight).
左下角:top:document.documentElement.clientHeight+document.documentElement.scrollTop-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0) - (parseInt(this.currentStyle.marginBottom,10)||0);left:document.documentElement.scrollLeft;left:document.documentElement.scrollLeft;
top:浏览器高度(clientHeight)+滚动顶部高度(scrollTop)-本身高度(offsetHeight)-本身上边距(marginTop)-本身下边距(marginBottom);
left:浏览器左边距(scrollLeft);
右下角:top:document.documentElement.clientHeight+document.document.scrollTop- (parseInt(this.currentStyle.marginTop,10)||0) - (parseInt(this.currentStyle.marginBottom,10)||0)-this.offsetHeight;left:document.documentElement.clientWidth+document.documentElement.scrollLeft - (parseInt(this.currentStyle.marginLeft,10)||0) - (parseInt(this.currentStyle.marginRight,10)||0)-this.offsetWidth;
top:浏览器高度(clientHeight) + 滚动条上边距(scrollTop) - 本身上边距(marginTop) - 本身下边距(marginBottom) - 本身高度(offsetHeight);
left:滚动左边距(scrollLeft)+浏览器宽度(clientWidth)-本身宽度(offsetWidth)-本身左边距(marginLeft)-本身右边距(marginRight).
下面是代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charest="utf-8" />
<title>
IE fixed
</title>
<style>
body{margin:0;padding:0;}
.test{width:100px;height:100px;background:#ccc;}
.fixed-l-t{ position:fixed;top:0px;left:0px;}/*左上角*/
.fixed-l-b{position:fixed;bottom:0px;left:0px;}/*左下角*/
.fixed-r-t{position:fixed;right:0px;top:0px;}/*右上角*/
.fixed-r-b{position:fixed;right:0px;bottom:0px;}/*右下角*/
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
*html .fixed-l-t{position:absolute;_left:expression(eval(document.documentElement.scrollLeft));_top:expression(eval(document.documentElement.scrollTop));}
*html .fixed-l-b{position:absolute;_left:expression(eval(document.documentElement.scrollLeft));_top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
*html .fixed-r-t{position:absolute;_left:expression(eval(document.documentElement.clientWidth+document.documentElement.scrollLeft-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)-this.offsetWidth));_top:expression(eval(document.documentElement.scrollTop));}
*html .fixed-r-b{position:absolute;_left:expression(eval(document.documentElement.clientWidth+document.documentElement.scrollLeft-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)-this.offsetWidth));_top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
</style>
</head>
<body>
<div class="fixed-l-t test">左上</div>
<div class="fixed-l-b test">左下</div>
<div class="fixed-r-b test">右底</div>
<div class="fixed-r-t test">右上</div>
<div style="width:10000px"></div>
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<p>Jin.DH</p>
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<p>Jin.DH</p>
<br /><br /><br /><br /><br /><br /><br />
</body>
</html>