我是FE,也是Fe

前端来源于不断的点滴积累。我一直在努力。

统计

留言簿(15)

阅读排行榜

评论排行榜

position:fixed在IE6下不起作用的修正原理以及实现

position:fixed能可以是元素不随滚动条滚动而滚动,固定在视口中,在网页设计中这种效果经常用到。通常不考虑IE6的代码是:

<body>
<div id="" class="" style="position:fixed; right:20px; top:20px;border:solid 1px blue;">
	fixed??
</div>
<div style="height:1000px;">mock page content<div>
</body>

 

主流的做法有两种,一种使用expression表达式,在页面滚动时重新设计元素的top属性:

<body>
<div id="" class="" style="position:fixed; right:20px; top:20px;border:solid 1px blue; _position:absolute;_top:expression(parseInt(document.documentElement.scrollTop,10)+20+'px');">
	fixed??
</div>
<div style="height:1000px;">mock page content<div>
</body>

这种方法比较直接,但是每次滚动都重新计算元素的位置很消耗性能,而且页面比较复杂的时候,会出现“抖动”的现象。

另外一种方法当你弄明白是才发现奇妙无穷,是否可以改变页面的滚动条滚动的元素呢?滚动条默认滚动的是body元素。如果滚动的是一个div,而需要固定定位的元素并不在这个div中的话,自然就不会随着滚动条的滚动而滚动。

<body>
<style type="text/css">
		html,body,#content{height:100%;overflow:auto;padding:0px;margin:0px;}
		#fixed{position:fixed; right:20px; bottom:20px; border:solid 1px  blue;_position:absolute;}
	</style>
<div id="content" class="">
	<div id="" class="" style="background-color:#ccc;height:1000px;">
		mock page content
	</div>
</div>
<div id="fixed" class="">
	fixed content
</div>
</body>

设置一个div与body等高等宽,将页面内容都放到这个div中。这样页面滚动条其实是这个div的滚动条。然后在body下放上position:fixed的元素。这样就大功告成了。

这基本是一个白话版的解决办法了。基本是原理和简单实现,更多的细节可以参考:

http://www.qianduan.net/fix-ie6-dont-support-position-fixed-bug.html

posted on 2011-05-16 15:37 衡锋 阅读(2688) 评论(1)  编辑  收藏 所属分类: Web开发

评论

# re: position:fixed在IE6下不起作用的修正原理以及实现[未登录] 2012-08-28 14:04 vic

人才啊! 偶像啊! 创意啊有木有!  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: