随滚动距离改变顶部区域的背景色渐变

前端开发 4年前 (2018) bestcyt
25 0 0

随滚动距离改变顶部区域的背景色渐变
1、需求分析:滚动距离在轮播图高度范围内时,实现顶部搜索部位的背景色渐变
思路:计算出当前滚动条滚动到的距离的透明度的值

  1. 获取当前滚动条滚动的距离
  2. 获取当前轮播图的高度
  3. 计算:透明度 = 距离  /  高度
  4. 把计算好的透明度值,设置背景色的 rgba里的最后一个值改为透明度值
  5. 滚动的距离小于轮播图高度的情况下除以轮播图高度会小于1,所以此时设置透明度值有渐变效果,当滚动出去的距离大于轮播图高度时,此时除以轮播图高度就会大于1,透明度的值在0-1之间,所以:当透明度值大于1时,直接设置背景色透明度值为1即可。
随滚动距离改变顶部区域的背景色渐变
//load事件,当页面加载完成再执行此段代码
	window.addEventListener('load', function() {
		//获取轮播图高度
		var slideHeight = document.querySelector('#slide').offsetHeight;
		console.log(slideHeight);
		//获取头部元素
		var header = document.querySelector('#header');
		//1.给页面添加一个滚动条滚动事件
		window.addEventListener('scroll', Opacity);
		Opacity();
		function Opacity() {
			//2.获取滚动距离,兼容性写法	浏览器版本不一样属性会有所不一样
			var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
			//3.计算透明度值	= 滚动距离 / 轮播图高度
			var opacity = scrollTop / slideHeight;
			//console.log(opacity);
			//4.判断:当透明度值小于1的时候就设置rgba透明度值为 计算的透明度值
			if(opacity <= 1) {
				header.style.background = 'rgba(222,24,27,' + opacity + ')';
			} else {
				//当滚动出去的距离大于轮播图高度时,除以轮播图高度会大于1,所以此时直接设置透明度值为1
				header.style.backgroundColor = 'rgba(222, 24, 27, 1 )';
			}
		}
	})

 
 

版权声明:bestcyt 发表于 2018年11月14日 pm9:51。
转载请注明:随滚动距离改变顶部区域的背景色渐变 | 爱前端导航

相关文章

联系站长