js 背景从无到黑的渐变 字从白到黑的渐变 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css透明度的变化</title>
		 <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<style type="text/css">
			#header {
				position: fixed;
				width: 100%;
				height: 50px;
				top: 0;
				left: 0;
				background: rgba(36, 41, 44,0);//背景的初始值
				color: rgba(230,23,71);//文字的初始值
			}
		</style>
	</head>

	<body>
		<div>
			<div id="header">头部</div>
			<ul>
				<li>12345678910</li>
				<li>12345678910</li>
				//想看效果的话多赋值几个出来
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var header = document.getElementById('header');
		window.onscroll = function() {
			var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;//获取页面滚动的距离
			console.log(scrollTop)
			var opcaity = (scrollTop / 100 > 1) ? 1 : scrollTop / 100;//透明度的渐变取值
			header.style.background = 'rgba(36,41,44,' + opcaity + ')';
		         if(opcaity>0.2){
                             header.style.color= 'rgba(255,255,255,' + opcaity + ')';
                        }else{
                              header.style.color='rgba(230,23,71)' //往回滑的时候再给一个默认值
                        }
		}
	</script>

</html>
posted @ 2019-04-25 15:06  李美玲  阅读(642)  评论(0)    收藏  举报