fixed 定位在 IE6 下的实现技巧一则-CSDN博客

本文链接：https://blog.csdn.net/phphot/article/details/4354970

受上面帖子的启发，也做了一个demo：ie6_fixed_position.html

代码：

<div id="a" style="width: 300px; height: 100px; background: red">test</div>

<script>

    var ie6 = !window.XMLHttpRequest;



    var a = document.getElementById('a');

    a.style.position = ie6 ? 'absolute' : 'fixed';

    a.style.right = 0;

    a.style.bottom = 0;



    if (ie6) {

        window.onscroll = function() {

            a.className = a.className;

        };

    }

</script>

原理分析：

position: absolute 的元素，直接放在position:static 的 body 中时，绝对定位的参考物是 body 的 viewport 部分。这使得元素 a 在窗口 resize 时，自动就能准确定位到右下角。注意：body 的 position 不能为 relative 等值，否则失效。
onscroll 时需要特殊处理一下，使得滚动时，也让绝对定位元素 a 的参考物能更新为当前的 viewport. 上面的a.className = a.className 就是这样一个 hack: 使得 a 的定位参考物动态更新为当前的 viewport. 类似的 hack 还有a.style.background = 'red' . 这些 hack 会引发 reflow, 但反之不一定，进一步的规律没找到，不过有一个 hack，也就够用了。

耐心总结，快乐分享，欢迎讨论。