Add class to viewport Div when scrolling up and scrolling down

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

if you find the answer helpful , please accept it. – Alexander Solonik Feb 26 '18 at 20:23 — Alexander Solonik, Feb 26 '18 at 20:23

score 0 · Accepted Answer · answered Feb 25 '18 at 20:35

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>

Add class to viewport Div when scrolling up and scrolling down

1 Answers1