不知大家在前端開發實踐中有沒有做過這樣一個效果，就是頁面佈局中有一個頂部通欄的搜尋登入框，我們的需求就是當滑鼠向下滾動時，頂部通欄始終固定在頂部，並且預設頂部是透明背景，而當頁面滾動時，頂部通欄的透明度隨著頁面捲曲的高度增加而變大，當頁面滾動距離超過某一個高度時，透明度就固定不變了。頂部通欄的固定很好實現，只需要令其position屬性值為fixed即可，頂部通欄的透明度則通過opacity屬性來設定。比較容易出錯的地方是這裡需要監聽頁面滾動事件，得到實時的頁面滾動距離，從而判斷其距離的大小作出不同的響應。

　　頁面的滾動事件監聽，可以通過一個js外掛：iscroll來實現，該外掛中的onscroll函式可以監聽頁面的滾動事件，而如何獲取頁面的滾動距離呢？最開始我使用的是document.body.scrollTop，但是發現無論如何獲取的滾動距離都是零，如下圖所示：

後來，我在《JavaScript高階程式設計》看到這樣一段描述：“document.documentElement.clientWidth和document.documentElement.clientHeight中儲存了頁面視口的資訊。在IE6中，這些屬性必須在標準模式下才有效；如果是混雜模式，就必須通過document.body.clientWidth和document.body.clientHeight取得相同資訊。”所以我改用document.documentElement.scrollTop後，成功獲取到了頁面的滾動距離。

最後，加上透明度變化，編寫如下js程式碼：

window.onscroll = function () {
     console.log(document.documentElement.scrollTop);
     var scrollTop = document.documentElement.scrollTop;
    /*1.預設的透明度*/
    var opacity = 0;
    if (scrollTop < height) {
        /*2.當頁面滾動的時候---隨著頁面捲曲的高度變大透明度變大*/
        opacity = scrollTop / height * 0.85;
    } else {
        /*3.當頁面滾動的時候---超過某一個高度的時候透明度不變*/
 
        opacity = 0.85;
    }
    searchBox.style.background = 'rgba(201,21,35,' + opacity + ')';
}
最終的效果如圖所示：實現了頂部通欄固定且透明度隨著頁面滾動變化的效果。