Loading...

Adding and removing class multiple times when scroll the page - wrong behavior


When <div> goes to the top, this <div> add the class "is-active" but, for some reason sometimes the <div> add and remove the class repeatedly

You can see this behaviour on this 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>

I expect that when the <div> goes to the top does not have this bug adding and removing class, just add one single time

- - Source
comments powered by Disqus