js简单头部demo

最新推荐文章于 2021-11-17 10:43:07 发布

只属于编码TY

最新推荐文章于 2021-11-17 10:43:07 发布

阅读量405

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_39917320/article/details/79190623

版权

滚动头部产生背景demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>自定义的属性</title>
<style type="text/css" media="screen">
*{
margin:0;
padding:0;
}
.dt{
height:50px;
background: rgba(0, 0, 0, 0);
transition: background 1s;
width:100%;
line-height:50px;
text-align:center;
position: fixed;
}
.box{
width:100%;
height:800px;
background:blue;
color:red;
font-size:16px;
padding-top: 50px;
font-weight:bold;
}
.uu{
background: rgba(0, 0, 0, 0.9);
color: #ddd;
}
</style>
</head>
<body>
<header class="dt">这是头部</header>
<div class="box" data-wt="tao">
<p>傻逼</p>
<p>蠢蛋</p>
<p>瓜子</p>
<p>菜鸡</p>
<p>弱鸡</p>
</div>
<script>
var he = 0;
triking = false;
var box = document.querySelector('.dt');
window.addEventListener("scroll", function(e){
var he = window.scrollY;
if(he>=100 && !triking){
box.classList.add('uu');
triking = true;
};
if(he<=0 && triking){
box.classList.remove('uu');
triking = false;
}
})
</script>
</body>
</html>