fixed 定位在 IE6 下的實現

下面的方法可以在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> </p><p><script type="text/javascript"><br />var ie6 = !window.XMLHttpRequest;<br />var a = document.getElementById('a');<br />a.style.position = ie6 ? 'absolute' : 'fixed';<br />if (ie6) {<br /> window.onscroll = function() { a.className = a.className; };<br /> window.onresize = function() { a.className = a.className; };<br />}<br /><script><br />