ie6中pisition:fixed不起作用,浮窗不随屏滚动解决办法

作者：袖梨 2022-06-25

按网上的说明,下面的这段css中的_top好像起不到作用.

代码如下 复制代码

.jumpbox{
position: absolute;
margin-left:-288px;
left:50%;
/*margin-top:-122px;*/
_margin-top:0px;
top:33%;
width:576px;
z-index:9999;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
display:none;

_top: expression(eval(document.compatMode &&
document.compatMode==’CSS1Compat’) ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight – this.clientHeight)/2);/*IE5 IE5.5*/
}

后来百度了一下

加上个属性

代码如下 复制代码
_top:expression(eval(document.documentElement.scrollTop));

就OK了！

利用IE特殊支持的CSS表达式以及position:absolute完美解决这个BUG。。

PS.以上方法还需要在html加入如下属性：

代码如下 复制代码

background-image:url(about:blank);
background-attachment:fixed;

最后我们再来整理一下


1、ie6下 position:fixed 设置

#bot-fixed{position:fixed;_postion:absolute;bottom:0;_bottom:auto;right:20px;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}

2、元素固定在浏览器的顶部和底部设置方法(针对IE6)

A:元素固定在浏览器的顶部：

代码如下 复制代码

#bot-fixed{_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop));}

B:元素固定在浏览器的底部:

代码如下 复制代码

#bot-fixed{_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}

3、解决position:fixed 层闪烁 的方法

在css样式表中添加

代码如下 复制代码
*html{ background-image:url(about:blank); background-attachment:fixed; }

属性


我们也可以使用js来解决些问题了

代码如下 复制代码

g1 = (getClientHeight() – o.height) / 2;//1000px总 元素高300px 则 g1=350px
g2 = g1 / getClientHeight();//350/1000 = 0.35
g2 = Math.round(g2 * 100) – 1;//=34 四去五入 大于五全部加，等于五正数加，小于五全不加。
$(‘.jumpbox’).css(‘top’, g2 + ‘%’);
$(‘.jumpbox’).css(‘height’,document.body.scrollHeight);
if ($.browser.msie && $.browser.version == “6.0″) {
default_top1=document.documentElement.scrollTop+150+”px”;
$(‘.jumpbox’).css(“top”,default_top1);
$(window).scroll(function() {
default_top2=document.documentElement.scrollTop+150+”px”;
$(‘.jumpbox’).css(“top”,default_top2);

})

}

相关文章

精彩推荐