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>



 

posted on 2012-02-17 16:34  向我开炮  阅读(337)  评论(0编辑  收藏  举报