转自: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,可能会因此让您的机器表示极度崩溃噢 @.@!