jquery - 每次从顶部到达 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，所以我需要它更加动态，以便它可以针对每个 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');
});

Answer 2

未经测试，但是：

$window.scroll(function() {
  $('.step').each(function() {
    var distance = $(this).offset().top - 150;
    if ($window.scrollTop() >= distance) {
      $(this).addClass('active');
    } else {
      $(this).removeClass('active');
    }
  });
});