最近更新
阅读排行
关注本站

在IE6中实现不跳动的固定定位

阅读:2662 次   编辑日期:2013-11-13

目录:

概述:

IE6不支持固定定位(position:fixed)是众所周知的事情,所以我们要想在IE6做出固定定位的效果就只能用JS,但是用JS会出现“跳动”的效果,所以有没有不用JS而且不跳动的办法呢?这是怎么做到的呢,今天我们讲一讲CSS中的行为—expression。

什么是行为—expression:

就是CSS属性后面可以是一段JS表达式,CSS属性的值等于JS表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

为什么使用行为(expression)能解决问题:

因为CSS中使用expression有IE才能识别。

实现方法:

说白了,就是在CSS中写入JS。
#backtop{
    width: 40px; height: 45px; position: fixed;right:0px;
    bottom: 10px; z-index: 9;
    //针对IE6
    _position: absolute;
    //针对IE6写入行为
    _top:expression(eval(document.documentElement.scrollTop+430));
    border: none;overflow: hidden;display: none;
    }
这样一个,固定定位的问题解决了,但是还有问题,元素会跳动,这是为什么呢?

IE6中的元素为什么会跳动的:

这是因为IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式,但是这是DOM结构是先于CSS展示出来,所以这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。 解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素! 然后我发现background-image无需一张真实的图片,设置成about:blank就行了。

元素跳动的解决办法:

#backtop{
    width: 40px; height: 45px; position: fixed;right:0px;
    bottom: 10px; z-index: 9;
    //针对IE6
    _position: absolute;
    //针对IE6写入行为
    _top:expression(eval(document.documentElement.scrollTop+430));
    border: none;overflow: hidden;display: none;
    }
body {
    //针对IE6在重画之前处理CSS
    _background: url(about:blank);
    _background-attachment: fixed;
    }
看看问题是不是解决了?快去试试吧。UW3C就是用的这种方法~用IE6看看去。
将本篇文章分享到:
top