滚动jquery只选择一个具有名称的类，而不是所有类

Question

我试图在某个特定的div到达顶部时添加一个类，但jquery将该类添加到具有相同类的所有div中，并且我只想选择当前位于顶部的div

Jquery代码

  let bannerTop = $('.travel__banner').offset().top,
            banner = $('.travel__banner')

        $(window).scroll(function() {

            if ( $(this).scrollTop() >= bannerTop ) {
                banner.addClass('is-active');
            } else {
                banner.removeClass('is-active');
            }
        });

Html代码

    <div class="travel">
        <div class="travel__banner">
            <h2 class="travel__banner__title" > title 1</h2>
        </div>
    </div>

    <div class="travel">
        <div class="travel__banner">
            <h2 class="travel__banner__title" > title 2</h2>
        </div>
    </div>

    <div class="travel">
        <div class="travel__banner">
            <h2 class="travel__banner__title" > title 3</h2>
        </div>
    </div>
</main>

我期望当带有类"travel__banner“的div移到顶部时，这个div添加类"is-active”，当我继续滚动带有类"travel__banner“的下一个div时，添加类”is-travel__banner“，而前一个div删除类"is-active”。

Answer 1

您需要遍历每个元素。对于名为JQuery ()的对象，each有一个有用的方法。

        // your element
        banner = $('.travel__banner'); // your element

        // your scroll event
        $(window).scroll(function() {
            // assign the scrollTop of the window to a var
            var scrollTop = $(this).scrollTop(); 

            // run through each banner element
            banner.each(function(){ 
              // get the top position of the current banner element and assign it to a var
              var bannerTop = $(this).offset().top
              if ( scrollTop >= bannerTop ) {
                  // here you add your class
                  $(this).addClass('is-active');
                  banner.not($(this)).removeClass('is-active');
              } else {
                  // and here you remove it
                  $(this).removeClass('is-active');
              }
            });

        });

下面是一个工作示例：

​

banner = $('.travel__banner')

$(window).scroll(function() {
      var scrollTop = $(this).scrollTop();
       banner.each(function(){
          var bannerTop = $(this).offset().top
          if ( scrollTop >= bannerTop ) {
              $(this).addClass('is-active');
              banner.not($(this)).removeClass('is-active');
          } else {
              $(this).removeClass('is-active');
          }
       });
            
});

.travel__banner{
  box-shadow:0px 3px 9px rgba(0,0,0,0.12);
  padding:16px;
}
.travel__banner.is-active{
  color:red;
}
.travel__banner.is-active:before{
  content: "(is active) "
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="travel__banner">
    My Banner
  </div>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>

  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <div class="travel__banner">
    My Banner
  </div>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
 
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>

  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
  <p>
    Paragraph in between
  </p>
</div>

​