javascript - 向上滚动时如何淡出我的元素

Question

我正在尝试制作漂亮的视差网站，但这是我第一次使用 jQuery，但是我遇到了以下问题:

HTML:

<div class="section4"><h1 class="text-center">Online Marketing</h1></div>
<div class="section4"><p style="text-align:justify">SOME TEXT IS HERE BUT IT DOES NOT IMPORTANT</p></div>

CSS:

.section4 {
    margin-bottom: 20px;
    position: relative;
    opacity: 0;
    transform: translateX(-40px);
}
.is-showing{
    opacity: 1;
    transform: translateX(0px); 
    transition: all 0.3s ease-in-out;
}
.is-hide {
    opacity: 0;
    position: relative;
}

JS:

var wScroll = $(this).scrollTop(); 
if($(window).scrollTop() > 800){

if (wScroll > $('.section4').offset().top - ($(window).height() / 2.2))    { 
    $('.section4').each(function(i){

        setTimeout(function(){

            $('.section4').eq(i).addClass('is-showing');
        }, 250 * (i+1));
        })
 }
 }

所以当我向下滚动时，效果很好。它会正确淡入，但现在我希望，当用户向上滚动时，它会消失。我试过:

JS:

else {
    $('.section4').eq().addClass('is-hide');
    })      

    //$('section4').fadeOut("slow");
}
 /*if (wScroll < $('.section4').offset().top + ($(window).height() - 500)) {
    $('.section4').addClass('is-hide');

 }*/

还有很多类似的例子，但现在我不知道如何解决它，所以如果有人能给我建议或一些解决方案，我将不胜感激。

Answer 1

如果我想检测滚动方向，我会执行以下操作:

var lastScrollTop = 0;
 var isScrollingDown = false;
$(window).scroll(function (event) {
    var currentScrollTop = $(window).scrollTop();
    if (lastScrollTop > currentScrollTop ) {
       isScrollingDown = false;
    } else {
       isScrollingDown = true;
    }
    // Do something
});

您可以在代码中使用此逻辑来按要求执行操作。