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

187 阅读1分钟
// 利用函数自执行 可以避免全局变量的污染,让代码模块化
// 加分号的目的是为了代码合并的时候避免报错
;(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 +')';
		}
	})
})()