<!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;
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>