Scroll jquery select just one class with the name, not all of them

Question

I'm trying to add a class when a specific div goes to the top but jquery add the class to all divs with the same class, and I just wanna select the div which is on the top at the moment

Jquery code

  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 code

    <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>

I expect that when the div with the class "travel__banner" goes to the top, this div add the class "is-active" and when I keeping scrolling the next div with the class "travel__banner" add the class "is-active" and the previous div remove the class "is-active"

Answer 1

You need to run through each element. JQuery has a useful method for that which is calld 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');
              }
            });

        });

Here is a working example example:

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>