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

Question

我的 html 页面中有一堆 div，它们都是 block 元素(一个在另一个之上，没有 float )，我想要的是每次这些 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');
});