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-活动”，而上一个div删除了“活动”类

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>

滚动jQuery只选择一个具有名称的类，而不是全部

1 个答案: