document.documentElement.scrollTop为零

var search = function () {
    /*1.默认固定顶部透明背景*/
    var searchBox = document.querySelector('.headBox');
    var banner = document.querySelector('.banner');
    var height = banner.offsetHeight;
    console.log(height);
    /*监听页面滚动事件*/
    window.onscroll = function () {
        var scrollTop = document.body.scrollTop;
        console.log(scrollTop);
        //console.log(scrollTop);
        /*默认的透明度*/
        var opacity = 0;
        if (scrollTop < height) {
            /*2.当页面滚动的时候---随着页面卷曲的高度变大透明度变大*/
            opacity = scrollTop / height * 0.85;
            console.log(height);
            console.log(scrollTop);
            console.log(opacity);
        } else {
            /*3.当页面滚动的时候---超过某一个高度的时候透明度不变*/
            opacity = 0.85;
        }
        searchBox.style.background = '-webkit-linear-gradient(left, rgba(2,124,187,'+opacity+'), rgba(217,228,131,'+opacity+'))';
    }
};

有没有发现：document.documentElement.scrollTop的仁始终为零，那是因为你的HTML文件加了这个：，所以DOM结构要改下：
原：document.body.scrollTop
改：document.documentElement.scrollTop
渐变加透明的效果是不是OK了呢？