向上滚动和向下滚动时，将类添加到视口Div

Question

I use Following code to add class when elements comes into viewport and remove when it goes out of viewport

function check_if_in_view() {
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = $(window).scrollTop() + $(window).height();

    $.each($animation_elements, function () {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);
         if ((element_bottom_position <= window_bottom_position) && element_top_position >= window_top_position) {
            $element.addClass('blue');

        } else {
            $element.removeClass('blue');
        }

    });
}

It works fine in scroll up and down , But now I want to add different classes for scroll up and down , I tried below code but it doesnt seem to be working .

if((element_bottom_position <= window_bottom_position)) {
    $element.addClass('blue');
}
else if (element_top_position >= window_top_position) {
    $element.addClass('red');

} else {
    $element.removeClass('blue').removeClass('red');
}

Answer 1

You will have to store the value of the scrollTop outside of your function and compare the scrollTop value inside your function to check if its more of less then the initial value of scrollTop , something like THIS .

you can integrate the same in your code like so:

 $(function(){ var $animation_elements = $('.justlolo'), $window = $(window), scrollTop = $(window).scrollTop(); function check_if_in_view() { var window_height = $(window).height(); var window_top_position = $(window).scrollTop(); var window_bottom_position = $(window).scrollTop() + $(window).height(); $.each($animation_elements, function () { var $element = $(this); var element_height = $element.outerHeight(); var element_top_position = $element.offset().top; var element_bottom_position = (element_top_position + element_height); if ((element_bottom_position > window_top_position) && element_top_position < window_bottom_position && window_top_position > scrollTop) { $element.removeClass('red').addClass('blue'); } else if((element_bottom_position > window_top_position) && element_top_position < window_bottom_position && window_top_position < scrollTop) { $element.removeClass('blue').addClass('red'); } else { $element.removeClass('blue red'); } }); } $(window).on('scroll' , () => { check_if_in_view(); scrollTop = $(window).scrollTop(); }) }); 

 *, *:after, *:before { box-sizing: border-box; } .justlolo { height: 70vh; background: #ccc } div:nth-of-type(even) { background: #eee; opacity: 0.8; } .blue { background: blue !important; } .red { background: red !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="justlolo"></div> <div class="justlolo"></div> <div class="justlolo"></div>