<!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>
解释：一个简单的导航dome。首先页面导航是一样的背景，然后鼠标滚动一定的高度导航会出现相应的样式，例如（背景）；
实现原理：外边定义全局变量两个，一个定义真假值，一个来标记当前的高度。首先获取身体元素，和当前的window的纵向高度。绑定滚动事件。然后判断当前的纵向滚动如果小于多少的时候与不是真的的时候给头部添加class样式背景，然后以真值返回出去，在来一个判断小于多少的时候，删除那个样式等。