Parallax effect fails across multiple classes

Question

I am trying to make a parallax effect and I am using jQuery for this. Here is my code:

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();
});

Basically, I want to match the class name scrollEffect-top- and then look for a number after. For example: scrollEffect-top-15, means transform: translateY(- scrolled * (15 / 100)px), or transform: translateY (- scrolled * .15)px.

The code works well for the first class name in HTML but if I use multiple items with the same class name but different number (classID_top number) it doesn't work.

Note: that if I use the same number, the code works well.

I tried to search and I found .each() method but it still doesn't work.

I am using HAML, here is my code:

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

Here is an actual HTML code:

<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() is a good start. Within the each function, this will refer to the specific item we're looking at. Any modifications can be made through that, rather than via the class (which will affect all matching objects).

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>