fixed 定位在 IE6 下的實現技巧一則

從藍色理想看到這貼：固定在右下角的離奇方法

受上面文章的啟發，也做了一個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>

原理分析：

1. position: absolute
   的元素，直接放在position:static
   的 body 中時，絕對位置的參考物是 body 的 viewport 部分。這使得元素 a 在視窗 resize 時，自動就能準確定位到右下角。注意：body 的 position 不能為 relative 等值，否則失效。
2. onscroll 時需要特殊處理一下，使得滾動時，也讓絕對位置元素 a 的參考物能更新為當前的 viewport. 上面的a.className = a.className
   就是這樣一個 hack: 使得 a 的定位參考物動態更新為當前的 viewport. 類似的 hack 還有a.style.background = 'red'
   . 這些 hack 會引發 reflow, 但反之不一定，進一步的規律沒找到，不過有一個 hack，也就夠用了。

耐心總結，快樂分享，歡迎討論。