不知大家在前端開發實踐中有沒有做過這樣一個效果，就是頁面布局中有一個頂部通欄的搜索登錄框，我們的需求就是當鼠標向下滾動時，頂部通欄始終固定在頂部，並且默認頂部是透明背景，而當頁面滾動時，頂部通欄的透明度隨着頁面卷曲的高度增加而變大，當頁面滾動距離超過某一個高度時，透明度就固定不變了。頂部通欄的固定很好實現，只需要令其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 + ')';
}
最終的效果如圖所示：實現了頂部通欄固定且透明度隨着頁面滾動變化的效果。