您的位置:首页 > 其它

fixed 定位在 IE6 下的实现

2010-03-02 11:46 246 查看
下面的方法可以在IE6下实现fixed定位。

1. position: absolute的元素,直接放在position:static的 body 中时,绝对定位的参考物是 body 的 viewport 部分。这使得元素 a 在窗口 resize 时,自动就能准确定位到右下角。注意:body 的 position 不能为 relative 等值,否则失效。

2. onscroll onresize时需要特殊处理一下,使得滚动时,也让绝对定位元素 a 的参考物能更新为当前的 viewport. 上面的a.className = a.className就是这样一个 hack: 使得 a 的定位参考物动态更新为当前的 viewport. 类似的 hack 还有a.style.background = 'red'. 这些 hack 会引发 reflow, 但反之不一定,进一步的规律没找到,不过有一个 hack,也就够用了。

<div id="a" style="position:absolute;right:1px;bottom:1px;width: 300px; height:100px;background: red">test</div>

<script type="text/javascript">
var ie6 = !window.XMLHttpRequest;
var a = document.getElementById('a');
a.style.position = ie6 ? 'absolute' : 'fixed';
if (ie6) {
window.onscroll = function() { a.className = a.className; };
window.onresize = function() { a.className = a.className; };
}
<script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: