【CSS】设置_lazarus css-CSDN博客

本文链接：https://blog.csdn.net/Lazarus_lan/article/details/113244659

要实现的功能：

当页面向上滑动距离>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>