每次从顶部到达150px时,将一个类添加到一组div

Question

我的html页面中有一堆div,它们都是块元素(一个在另一个上面,没有浮动),我想要的是每次这些div中的一个从窗口顶部达到150px时,它得到一个类.active应用于它.所有这些div都具有相同的类名,但它们各自具有不同的ID以区分它们.所以我需要一些jQuery代码,可以对每个div执行相同的过程,而不必为每个div编写代码.

这是html:

<div id="steps">
   <div class="step" id="step-1"></div>
   <div class="step" id="step-2"></div>
   <div class="step" id="step-3"></div>
   <div class="step" id="step-4"></div>
</div>

我有jquery工作,但它针对一个ID,所以我需要它更动态,以便它可以针对每个.总共只有4个步骤.

var distance = $('#step-1').offset().top - 150,
$window = $(window);
$window.scroll(function() {
   if ( $window.scrollTop() >= distance ) {
     $('#step-1').addClass('active');
     }
   });

谢谢你的帮助!

Answer 1

$(window).on('scroll', function() {
    var scrolled = $(this).scrollTop();

    $('.step').filter(function() {
         return scrolled >= $(this).offset().top-150;
    }).addClass('active');
});