ie6不识position:fixed，固定定位的其它实现

转自：http://sentsin.com/web/14.html

很多时候，您可能需要这样一种效果：固定定位。而css的position您并不陌生，通常地，我们会设置这样一个属性，position:fixed,当你使用的是IE7+以及其他高级浏览器，你便发现，这可以轻易得到完美的实现。可是，在IE6下它又是另外一幅摸样，古老的ie6在这个属性还未诞生之际便已经驰骋世界多年，所以不识它也是在情理之中。

那么，你可能会首先想到使用js去修补ie6的这一缺陷，您会首先这么做：

<div id="demo" style=" position:fixed; _position:absolute; left:100px; top:120px; background:#000; width:100px; height:100px;"></div>
1
2
3
4

代码laycode
- v1.1

然后你便开始书写js：

var iE6 = !-[1,] && !window.XMLHttpRequest, obj  = document.getElementById('demo'), fix = function(){
obj.style.top =  document.documentElement.scrollTop + obj.offsetHeight
};
!iE6 || (window.onscroll = fix);
1
2
3
4
5
6

代码laycode
- v1.1

如果您是jqueryEr，您或许还会这样写：

$(function(){
var iE6 = !-[1,] && !window.XMLHttpRequest, top = $('#demo').offset().top, ieFix = function(){
$('#demo').css({'top' : $(document).scrollTop() + top});
};
!iE6 || $(window).scroll(ieFix);
});
1
2
3
4
5
6
7
8

代码laycode
- v1.1

您发现，在IE6下，这的确可以让元素固定在您所指定的区域，但遗憾的是，这个元素的抖动引发了你的新一轮猜想，为什么在IE6下会有如此蹩脚的抖动？ 当您试图询问百度或者谷歌，您便进入了贤心的前端世界，您眼前所阅读的，或许正是您所寻找的接近完美的解答！或许这并不算是IE6的bug，前文提到，ie6诞生于2001年10月，这种古老程度意味着它无法预知后续迅速革新的web技术，而它本身对javascript的执行性能并不健壮，再加上scroll是一个运行频率相对较高的事件，因此ie6不足以承受scrol的快节奏指示。

在这种理解下，作为前端攻城狮的你，像往常一样，试图着利用css的hack去缓解ie6不健全的功能，您会写上这样一段css ：

*html{_background-image:url(about:blank); _background-attachment:fixed; zoom:1;}
1
2

代码laycode
- v1.1

再次打开IE6，您发现那种抖动稍稍得到了收敛，而网上铺天盖地的解决方法在此几乎都点到为止，这是最终的解决方法吗？ ie6真的无法实现完全不抖动的固定？ 答案是否定的！ 请继续看完下面的代码：它会给您不一样的收货：

<style>
*html{_background-image:url(about:blank); _background-attachment:fixed; zoom:1;}
.ie6Fix{position:fixed; left:100px; top:120px; background:#000; width:100px; height:100px; color:#FFF; _position:absolute; _top:expression(document.documentElement.scrollTop+(parseInt(this.currentStyle.marginTop,10)||120));}
</style>
<div id="demo" class="ie6Fix">fixed for IE6</div>1
2
3
4
5
6
7
8
9

代码laycode
- v1.1

到此，这一功能得到了比较可以接受的实现。赶快去试一试吧！（PS，还有更好的方案，就是隐藏浏览器滚动条，以html元素取而代之）

可贤心不得不提的是，作为css的强大方法，expression可以让css按照javascript表达式所计算的结果来表达视图，但它的问题在于，它的计算频率要比我们想象中的多很多，不仅仅是页面的显示和缩放，就是在页面滚动，甚至鼠标移动时都会重新执行一次，这无疑是恐怖的，尤其是对于先天不足的IE6，可能会因此让您的机器表示极度崩溃噢 @.@！