视差效果在多个类中失效

Question

我正在尝试制作视差效果，为此我正在使用 jQuery。这是我的代码：

function scrollEffectTop() {
 $('[class^=scrollEffect-top-]').each(function() {
  if ($('[class^=scrollEffect-top-]').length) {
   var scrolled = $(window).scrollTop();
   var classID_top = $('[class^=scrollEffect-top-]').attr('class').match(/\d+/)[0];
   $('.scrollEffect-top-' + classID_top).css({'transform':'translateY(-' + scrolled * (classID_top / 100) + 'px)'});
  }
 });
}

$(window).scroll(function(e) {
 scrollEffectTop();
});

基本上，我想匹配 class 名称 scrollEffect-top- 然后在后面查找数字。例如：scrollEffect-top-15，表示transform: translateY(- scrolled * (15 / 100)px)，或transform: translateY (- scrolled * .15)px.

该代码适用于 HTML 中的第一个 class 名称，但如果我使用具有相同 class 名称但 不同 [=35= 的多个项目] 号（classID_top 号）不起作用。

注意：如果我使用相同的号码，代码运行良好。

我尝试搜索并找到了 .each() 方法，但它仍然无效。

我正在使用 HAML，这是我的代码：

%section{class:"container-m relative"} .intro-image{style:"overflow: hidden;"} .scrollEffect-top-15 .revealedBox.goRight %div{class:"picture-for-#{controller.action_name} contentBox"}

这是一个实际的 HTML 代码：

<section class="container-m relative"> <div class="intro-image" style="overflow: hidden;"> <div class="scrollEffect-top-15"> <div class="revealBox goRight"> <div class="picture-for-#{controller.action_name} contentBox"></div> </div> </div> </div> </section>

Answer 1

.each() 是一个好的开始。在 each 函数中，this 将引用我们正在查看的特定项目。任何修改都可以通过 that 而不是通过 class 进行（这将影响 all 匹配对象）。

function scrollEffectTop() {
  $('[class^=scrollEffect-top-]').each(function() {
    var scrolled = $(window).scrollTop();
    var classID_top = $(this).attr('class').match(/\d+/)[0];
    $(this).css('transform',
      'translateY(-' + scrolled * (classID_top / 100) + 'px)');
  });
}

$(window).scroll(function(e) {
  scrollEffectTop();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container-m relative">
  <div class="intro-image" style="overflow: hidden;">
    <div class="scrollEffect-top-20">
      <div class="revealedBox goRight">
        <div class="picture-for-foo contentBox">
          <img src="http://placehold.it/350x150" />
        </div>
      </div>
    </div>
  </div>
</section>

<section class="container-m relative">
  <div class="intro-image" style="overflow: hidden;">
    <div class="scrollEffect-top-21">
      <div class="revealedBox goRight">
        <div class="picture-for-foo contentBox">
          <img src="http://placehold.it/350x150" />
        </div>
      </div>
    </div>
  </div>
</section>


<section class="container-m relative">
  <div class="intro-image" style="overflow: hidden;">
    <div class="scrollEffect-top-22">
      <div class="revealedBox goRight">
        <div class="picture-for-foo contentBox">
          <img src="http://placehold.it/350x150" />

        </div>
      </div>
    </div>
  </div>
</section>


<section class="container-m relative">
  <div class="intro-image" style="overflow: hidden;">
    <div class="scrollEffect-top-23">
      <div class="revealedBox goRight">
        <div class="picture-for-foo contentBox">
          <img src="http://placehold.it/350x150" />

        </div>
      </div>
    </div>
  </div>
</section>


<section class="container-m relative">
  <div class="intro-image" style="overflow: hidden;">
    <div class="scrollEffect-top-24">
      <div class="revealedBox goRight">
        <div class="picture-for-foo contentBox">
          <img src="http://placehold.it/350x150" />

        </div>
      </div>
    </div>
  </div>
</section>

视差效果在多个类中失效

Parallax effect fails across multiple classes

html

jquery

haml

scroll

parallax

视差效果在多个 类 中失效

Parallax effect fails across multiple classes

html

jquery

haml

scroll

parallax

视差效果在多个类中失效