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