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了呢?