滚动并向下滚动时，将类添加到视口div中

Question

我使用以下代码添加类别时添加exterm当元素出现时删除视图

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

您必须在功能之外存储滚动台的值，并比较函数内部的scollltop值，以检查其是否较小，而不是scrolltop的初始值，例如<<strong>此。

您可以在代码中集成在一起：

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