Javascript 如何在向上滚动时淡出我的元素

我正试图创建一个不错的视差网站，但这是我第一次使用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>

JS:

所以，当我向下滚动时，这是一项伟大的工作。它会正确地淡入，但现在我想，当用户向上滚动时，它会消失。我试过：

JS:

else{
$（'.section4'）.eq（）.addClass（'is-hide'）；
})      
//$（'section4'）。淡出（“慢”）；
}
/*如果（wScroll<$（'.section4'）.offset（）.top+（$（窗口）.height（）-500））{
$（'.section4'）.addClass（'is-hide'）；
}*/

---

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

如果您正在寻找第三方解决方案，您可以查看

---

这是一个很棒的轻量级库，在滚动时使用animate.css效果。

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

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

---

您可以根据需要在代码中使用此逻辑。

您在哪里设置wScroll？@Deep sry？谢谢，我忘记粘贴了。现在我编辑它。

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

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

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

 }*/

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