Question

我的div设置为：

{
  height: 100vh;
  width: 100%;
  background-color: black;
  opacity: 0;
  position: absolute;
  z-index: 2;
}

此div也在页面顶部。我要制作它，以便当我向下滚动（并远离div）时，它逐渐淡入，而当我向上滚动时，它逐渐淡出。

我该怎么做？

Answer 1

您可以参考以下代码段。我要说明的是在底部的脚本标签中添加了窗口滚动功能，该功能将css类“ .top”中所需高度的整个窗口设置为不透明度。因此，当您尝试滚动时，它将动态地向窗口添加动画效果。

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <style>
    body {
      margin: 0;
      height: 1000px;
    }
    
    .top {
      margin: 0;
      position: relative;
      width: 100%;
      background-color: #aaa;
      height: 300px;
      opacity: 1;
      text-align: center;
      font-family: 'helvetica';
      font-size: 80px;
      font-weight: 100;
      color: #fff;
    }
    
    .title {
      position: absolute;
      top: 60%;
      left: 100px;
    }
  </style>
</head>

<body>
  <div class="top">
    <div class="title">Fade Away</div>
  </div>
</body>

</html>

<script>
  $(window).scroll(function() {
    $(".top").css("opacity", 1 - $(window).scrollTop() / 250);
  });
</script>

Answer 2

 document.body.addEventListener('wheel', (e) => {
                                    let faceLayer = document.getElementById('your_id');
                                    faceLayer.style.opacity = Math.abs(faceLayer.getBoundingClientRect().top / faceLayer.clientHeight).
                                })

滚动时使div淡入和淡出

2 个答案: