解決IE6不支持position:fixed問題

不多的時候，界面上須要一個固定位置的塊，不論頁面怎麼滾動，始終停在它的位置，好比「返回頂部」、「給建議」、「分享按鈕」、「廣告」等等。css中有position: fixed;能夠直接用，很方便，可是萬惡的IE6卻不支持，下面講兩種方法解決這個問題。

方法一：

*html {/* 只有IE6支持 */
    background-image: url(about:blank); /* 使用空背景 */
    background-attachment: fixed; /* 固定背景 */
}
#box {
    /* 非IE6瀏覽器使用固定元素 */
    position: fixed;
    top: 0;
    left: 0;
    /* IE6改成絕對定位，並經過css表達式根據滾動位置更改top的值 */
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop));
}

這個方法要注意的是，*html使用固定位置空背景目的是解決滾動的時候抖動的問題，原理是這樣，滾動頁面瀏覽器從新計算出網頁，而後執行css，因此固定元素產生延遲的抖動，使用固定背景以後，在滾動的時候先執行了css，再從新計算網頁，因此沒有抖動問題了。
document.documentElement.scrollTop是滾動條偏移的值，能夠根據這個來設置位置，好比document.documentElement.scrollTop+200或者使用margin定位也行。

方法二：純css的解決方法

html { _overflow: hidden; }
body { _height: 100%; _overflow: auto; }
.box {
    position: fixed;
    left: 10px;
    top: 180px;
    _position: absolute;
}

原理很簡單，滾動條是body的滾動，固定元素是相對body定位，那麼把它設置窗口那麼高，不就一直是在窗口那個位置了？

最後，我選擇的是方法一。
雖然第二種看起來簡單，可是我想直接設置了html或者body的height和overflow可能會帶來未知的界面bug，不太敢用。第一種方法感受安全一些，並且能夠查看淘寶網，也是用的第一種方法。