IE6不支持position:fixed和滚动不闪烁(3种解决方法)

 

 

 

很多时候，界面上需要一个固定位置的块，不论页面怎么滚动，始终停在它的位置，比如“返回顶部”、“给建议”、“分享按钮”、“广告”等等。css中有position: fixed;可以直接用，很方便，但是万恶的IE6却不支持，下面讲两种方法解决这个问题。
如何解决“振动”的问题？

显然IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重画页面，这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。

解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS，它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素！

这个方案并不是我提供的。我是在网上的某个地方读到这些的。如果你知道是谁原创了这个方法，

方法一：

1. *html {/* 只有IE6支持 */
2.     background-image: url(about:blank); /* 使用空背景 */
3.     background-attachment: fixed; /* 固定背景 */
4. }
5. #box {
6.     /* 非IE6浏览器使用固定元素 */
7.     position: fixed;
8.     top: 0;
9.     left: 0;
10.     /* IE6改为绝对定位，并通过css表达式根据滚动位置更改top的值 */
11.     _position: absolute;
12.     _top: expression(eval(document.documentElement.scrollTop));
13. }

复制代码

这个方法要注意的是，*html使用固定位置空背景目的是解决滚动的时候抖动的问题，原理是这样，滚动页面浏览器重新计算出网页，然后执行css，所以固定元素产生延迟的抖动，使用固定背景之后，在滚动的时候先执行了css，再重新计算网页，所以没有抖动问题了。
document.documentElement.scrollTop是滚动条偏移的值，可以根据这个来设置位置，比如document.documentElement.scrollTop+200或者使用margin定位也行。

方法二：纯css的解决方法

1. html { _overflow: hidden; }
2. body { _height: 100%; _overflow: auto; }
3. .box {
4.     position: fixed;
5.     left: 10px;
6.     top: 180px;
7.     _position: absolute;
8. }

复制代码

原理很简单，滚动条是body的滚动，固定元素是相对body定位，那么把它设置窗口那么高，不就一直是在窗口那个位置了？
方法三：js解决

这种方法是最古老的一种方法，但我不喜欢这个方法，除非在特定效果里需要js才会用，不然不建议加载不必要的js!这个方法就不详细说了，网上一大堆，去度娘一下^

最后，我选择的是方法一。
虽然第二种看起来简单，但是我想直接设置了html或者body的height和overflow可能会带来未知的界面bug，不太敢用。第一种方法感觉安全一些，而且可以查看淘宝网，也是用的第一种方法。