要实现的功能：
- 当页面向上滑动距离>200px时，
- 隐藏div1
- 在隐藏div1的同时，div2向上滑动到页面顶部
- 当页面向上滑动距离<200px时，
- 显示div1
- 显示的同时，div2显示在div1下方
Chrome中实现：
- 原始的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
margin: 0;
padding: 0;
}
.div1{
height: 100px;
background-color: yellow;
position: fixed;
top:0;
left: 0;
right: 0;
}
.div2{
height: 200px;
background-color: #52ff75;
position: fixed;
top: 100px;
left: 0;
right: 0;
}
.div3{
margin-top: 300px;
height: 3000px;
background-color: blue;
}
.myspan{
display: block;
padding-top: 200px;
}
</style>
</head>
<body>
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
<span class="myspan">div3</span>
</div>
</body>
</html>
如下图：
2. 加入变化后的div2-b
.div2-b{
height: 200px;
background-color: #52ff75;
position: fixed;
top: 0;
left: 0;
right: 0;
}
- JS监听DOM
<script>
let div1 = document.getElementsByClassName('div1')[0];
let div2 = document.getElementsByClassName('div2')[0];
document.addEventListener('scroll',(event)=>{ //添加监听事件，监听页面滚动
let top = event.target.scrollingElement.scrollTop; // 获取页面已经滚动的高度
if(top>=200){ //页面滚动的高度大于200px
div1.style.display = 'none'; //不显示div1
div2.classList = ['div2-b'] //修改div2的样式
}
else { //页面滚动的高度小于200px
div1.style.display = 'block'; //显示div1
div2.classList = ['div2'] //div2最初的样式
}
console.log(top)
},false)
</script>
- 加入动画
关键帧动画：
.div2-b{
height: 200px;
background-color: #52ff75;
position: fixed;
top: 0;
left: 0;
right: 0;
-webkit-animation:myfirst 1s; /*添加关键帧动画*/
}
@-webkit-keyframes myfirst {
0% {background: #52ff75; left:0; top:100px;}
50% {background: yellow; left:0; top:50px;}
100% {background: #52ff75; left:0; top:0;}
}
- 全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
margin: 0;
padding: 0;
}
.div1{
height: 100px;
background-color: yellow;
position: fixed;
top:0;
left: 0;
right: 0;
}
.div2{
height: 200px;
background-color: #52ff75;
position: fixed;
top: 100px;
left: 0;
right: 0;
}
.div2-b{
height: 200px;
background-color: #52ff75;
position: fixed;
top: 0;
left: 0;
right: 0;
-webkit-animation:myfirst 1s;
}
@-webkit-keyframes myfirst
{
0% {background: #52ff75; left:0; top:100px;}
50% {background: yellow; left:0; top:50px;}
100% {background: #52ff75; left:0; top:0;}
}
.div3{
margin-top: 300px;
height: 3000px;
background-color: blue;
}
.myspan{
display: block;
padding-top: 200px;
}
</style>
</head>
<body>
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
<span class="myspan">div3</span>
</div>
</body>
<script>
let div1 = document.getElementsByClassName('div1')[0];
let div2 = document.getElementsByClassName('div2')[0];
document.addEventListener('scroll',(event)=>{
let top = event.target.scrollingElement.scrollTop;
if(top>=200){
div1.style.display = 'none';
div2.classList = ['div2-b']
}
else {
div1.style.display = 'block';
div2.classList = ['div2']
}
console.log(top)
},false)
</script>
</html>