fixed 定位在 IE6 下的实现

最新推荐文章于 2019-10-26 19:37:26 发布

原创最新推荐文章于 2019-10-26 19:37:26 发布 · 882 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #function #div

javascript 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种在IE6浏览器中实现fixed定位的方法。通过将元素设置为绝对定位，并在onscroll和onresize事件中使用特定的hack，可以使元素相对于视口定位，即使在页面滚动或窗口调整大小时也能保持位置不变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面的方法可以在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>