滚动页面时多次添加和删除类-错误行为

Question

当<div>到达顶部时，此<div>添加类“ 是活动的”，但是由于某些原因，有时<div>添加并删除反复上课

您可以在此gif on this gif上看到此行为！

jQuery：

       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');
                }
            });
        });

HTML：

<div class="travel">
        <div class="travel__banner">
            <div class="travel__banner__crop">
                <img src="<?php bloginfo('stylesheet_directory')?>/img//marbela.jpg" alt="xirau">
                <h2 class="travel__banner__date"> 10/04 </h2>
            </div>
        </div>

        <div class="travel__content">
            <span class="travel__content__hour"> 12:00 </span>
            <h2 class="travel__content__title"> Road Bike na costa brava </h2>

            <img class="travel__content__image" src="<?php bloginfo('stylesheet_directory')?>/img//marbela.jpg"
                alt="xirau">

            <p class="travel__content__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula
                ligula consectetur lorem porta, at tristique justo tempor. Vivamus eu eros eget nunc </p>
        </div>

        <div class="travel__content">
            <span class="travel__content__hour"> 12:00 </span>
            <h2 class="travel__content__title"> Road Bike na costa brava </h2>

            <img class="travel__content__image" src="<?php bloginfo('stylesheet_directory')?>/img//marbela.jpg"
                alt="xirau">

            <p class="travel__content__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula
                ligula consectetur lorem porta, at tristique justo tempor. Vivamus eu eros eget nunc </p>
        </div>

    </div>

    <div class="travel">
        <div class="travel__banner">
            <div class="travel__banner__crop">
                <img src="<?php bloginfo('stylesheet_directory')?>/img//bike-2.jpg" alt="xirau">
            </div>
            <h2 class="travel__banner__date"> 11/04 </h2>
        </div>

        <div class="travel__content">
            <span class="travel__content__hour"> 12:00 </span>
            <h2 class="travel__content__title"> Road Bike na costa brava </h2>

            <img class="travel__content__image" src="<?php bloginfo('stylesheet_directory')?>/img//bike-2.jpg"
                alt="xirau">

            <p class="travel__content__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula
                ligula consectetur lorem porta, at
                tristique justo tempor. Vivamus eu eros eget nunc </p>
        </div>

        <div class="travel__content">
            <span class="travel__content__hour"> 12:00 </span>
            <h2 class="travel__content__title"> Road Bike na costa brava </h2>

            <img class="travel__content__image" src="<?php bloginfo('stylesheet_directory')?>/img//bike-2.jpg"
                alt="xirau">

            <p class="travel__content__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula
                ligula consectetur lorem porta, at
                tristique justo tempor. Vivamus eu eros eget nunc </p>
        </div>
    </div>

我希望<div>到达顶部时不会出现此错误添加和删除类，只需添加一次即可