Javascript 视差在较小的DIV中不工作，但在"；全屏；_Javascript_Html_Css_Parallax

Javascript 视差在较小的DIV中不工作，但在"；全屏；

javascript html css

Javascript 视差在较小的DIV中不工作，但在"；全屏；,javascript,html,css,parallax,Javascript,Html,Css,Parallax,当视差小于100vh时，我的视差有问题。。。当它的100vh和100%的宽度，它的工作很好。。。。我的目标是以不同的速度移动.beba、.ball1和.ball2。我假设我在使用positions或display的代码中有一些错误，但由于我是一名新的编码员，所以我无法理解：） HTML: <body> <div id="sadrzaj" class="sadrzaj"> <section id="

当视差小于100vh时，我的视差有问题。。。当它的100vh和100%的宽度，它的工作很好。。。。我的目标是以不同的速度移动.beba、.ball1和.ball2。我假设我在使用positions或display的代码中有一些错误，但由于我是一名新的编码员，所以我无法理解：）

HTML:

<body>
    <div id="sadrzaj" class="sadrzaj">
      <section id="home">
        <header>
          <nav id="nav">
            <ul class="navul">
              <li><a href="#">Home</a></li>
              <li><a href="#gallery">Photos</a></li>
              <img class="logo" src="img/LOGO.png" alt="logo" height="80px" />
              <li><a href="#about">About us</a></li>
              <li><a href="#contact">Contact us</a></li>
            </ul>
          </nav>
        </header>
        <div class="homecont">
          <div class="homepic">
            
            <img src="img/yoga.jpg" alt="" />
          </div>

          <div class="beba">
            <img src="img/beba.jpg" alt="" />
          </div>
          <img src="img/loptica.png" alt="" class="ball1" />
          <img src="img/loptica.png" alt="" class="ball2" />

          <p class="phtxt">Photography</p>
        </div>
      </section>
      <section id="gallery">
       
      </section>
      <section id="about">
        
      </section>
      <section id="contact">
        

      </section>

    </div>
   <script src="app.js"></script>
</body>

JavaScript:

function parallax (element, distance, speed){
   const item = document.querySelector(element);
   item.style.transform = `translateY(${distance * speed}px)`;

}

window.addEventListener('scroll', function(){

   parallax("header", window.scrollY, -0.1) ;
   parallax("#home", window.scrollY, 0);
   parallax(".beba", window.scrollY, -0.5);
   parallax(".ball1", window.scrollY, -1.3);
   parallax(".ball2", window.scrollY, -0.7);
});

这是第一部分的样子。。。

function parallax (element, distance, speed){
   const item = document.querySelector(element);
   item.style.transform = `translateY(${distance * speed}px)`;

}

window.addEventListener('scroll', function(){

   parallax("header", window.scrollY, -0.1) ;
   parallax("#home", window.scrollY, 0);
   parallax(".beba", window.scrollY, -0.5);
   parallax(".ball1", window.scrollY, -1.3);
   parallax(".ball2", window.scrollY, -0.7);
});