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

Question

我使用以下代码在元素进入视口时添加类，并在元素离开视口时删除类

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

    });
}

它可以在上下滚动中正常工作，但是现在我想为上下滚动添加不同的类，我尝试了下面的代码，但似乎不起作用。

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

您将必须将scrollTop的值存储在函数外部，并比较函数内部的scrollTop值，以检查其是否大于scrollTop的初始值，例如THIS 。

您可以像这样将它们集成到您的代码中：

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