时间戳

首页 > 解决方案 > 滚动时更改 div 显示

javascript - 滚动时更改 div 显示

问题描述

嘿伙计们，当滚动通过第一个 div（即类名“one”）高度时，我正在尝试进行转换，它将其宽度调整为 20%，第二个 div（类名“two”）将取“一”类的剩余宽度。<== 当这种情况发生时，它会将“two”类转换为块而不是内联块的显示。我现在遇到的问题是，当“.one”类的大小调整为 20% 时，“.two”类的消失与下面的类相同，而当我向上滚动时“.two”类消失，它只会调整大小“.one”类 div 中途。谁能帮助我如何实现这一目标？这是我的代码和一些我想要制作的过渡图像，以防我仍然对我想要实现的目标感到困惑。

在这里，它从该图像显示到左侧显示的页面在滚动前的显示，以及从右侧显示的用户滚动页面时显示的图像，这将减小 div 类的大小“。

在左边的这部分图像中，当 div 类“.one”的宽度为 20% 时，它不会再次调整它的大小，而当 div 类“.one”的宽度为 20 时显示的右图% 它将 div 类 ".two" 的 css 从内联块更改为显示块，并且当它滚动时它将显示第三个 div。 在此处输入图像描述 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    body {
      overflow-x: hidden;
      height: 2000px;
    }

    .container {
      width: 100vw;
      height: 100vh;
      position: fixed;
    }

    .content-wrapper {
      width: 100vw;
      white-space: nowrap;
    }

    .section {
      width: 100vw;
      height: 100vh;
      position: relative;
      display: inline-block;
    }

    .section label {
      font-size: 100px;
      color: white;
      text-align: center;
      transform: translateX(-50%) translateY(-50%);
    }

    .one {
      background-color: red;
      top: 0;
      z-index: -999;
    }

    .two {
      background-color: yellow;
      width: 100vw;
      height: 100vh;
    }
    </style>
</head>
<body>
    <div class="container">
      <div class="content-wrapper">
        <div class="section one">
          <label>one</label>
        </div>
        <div class="section two">
          <label>two</label>
        </div>
      </div>
      <div class="revelation" style="width: 100vw; height: 100vh; background-color: black;">
        <label>Tree</label>
      </div>
    </div>
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous">
    </script>
    <script type="text/javascript">
    $(window).scroll(function() {
        var winScrollTop = $(window).scrollTop() + 0,
        zeroSizeHeight = $(document).height() - $(window).height(),
        newSize = 1400 * (1 - (winScrollTop / zeroSizeHeight));
        let box = document.querySelector('.one');
        let width = box.clientWidth;
        console.log(newSize)
        if(newSize > 331.13772455089827 ){
            $(".one").css({
                "width":newSize
            })
        }else if(newSize <= 331.13772455089827){
            $(".section").css({
                "display":"block"

            })
        }
    });
    </script>
</body>
</html>

标签： javascripthtmlcss

解决方案

推荐阅读