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

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 )';
			}
		}
	})