向上滾動和向下滾動時，將類添加到視口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>