javascript - 视差效果不起作用

Question

所以我的主页上有 2 个“横幅/英雄”部分，我试图在两个横幅上重新使用“视差”类。问题是它在第一个上完美运行，但是当我将视差类添加到第二个英雄时，该部分完全从屏幕上消失，奇怪的是，这只发生在我将背景重复设置为 no-在第二个英雄部分重复。这是代码；

$( document ).ready(function() {

  $(window).scroll(function() {
    var wScroll = $(window).scrollTop();
    $('.parallax').css('background-position', 'center ' +(wScroll)+'px')
  })

});

.hero {
  height: 100vh;
  background-image: linear-gradient(to bottom, rgba(205, 169, 157, 0.7), rgba(205, 169, 157, 0.7)), url(../img/home-1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

.hero-secondary {
  height: 90vh;
  background-image: linear-gradient(to bottom, rgba(205, 169, 157, 0.7), rgba(205, 169, 157, 0.7)), url(../img/home-5.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  position: relative;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: $color-white;
}

<section class="hero parallax">
    <div class="hero-content">
      <h1 class="heading-primary">SS — 18</h1>
      <a href="#" class="button">Shop now</a>
    </div>
  </section>
  
  <section class="hero-secondary parallax">
      <div class="hero-content">
        <h1 class="heading-primary">fw — 18</h1>
        <a href="#" class="button">Shop now</a>
      </div>
    </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Answer 1

这就是我解决问题的方法，我必须将 Jquery 代码编辑为以下内容；

$(窗口).scroll(函数() { var wScroll = $(window).scrollTop(); $('.parallax').css('background-position', 'center' +(wScroll*0.30)+'px') })

并移除 hero-secondary 类中的 background-repeat 属性。我仍然不知道为什么设置背景重复时该部分会消失:不重复。如果有人能告诉我为什么会这样，我将不胜感激。谢谢。