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

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

Answer 2

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

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

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

2 个答案: