移动端 => 动态改变头部透明度

// 利用函数自执行 可以避免全局变量的污染，让代码模块化
// 加分号的目的是为了代码合并的时候避免报错
;(function(){
	
//需求：在滚动的时候动态改变jd-header的透明度

//思路：
	//（1）主要的逻辑在scroll事件里面完成
	//（2）比例关系：不断被卷曲的高度/目标高度（自己设定的）= 不断改变的透明度/0.8

	var jdHeader = document.querySelector('.jd-header');
	// 自己设定的目标高度
	var maxTop = 200;
	// 注册scroll事件
	window.addEventListener('scroll', function(){
		// 获取不断被卷曲的高度
		var scrollTop = document.body.scrollTop;

		// 通过被卷曲的高度去影响透明度
		if(scrollTop > maxTop){
			jdHeader.style.background = 'rgba(201, 21, 35,0.8)';
		}else{
			jdHeader.style.background = 'rgba(201, 21, 35,'+ scrollTop/maxTop*0.8 +')';
		}
	})
})()
复制代码