我正在尝试制作漂亮的视差网站,但这是我第一次使用 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');
}*/
还有很多类似的例子,但现在我不知道如何解决它,所以如果有人能给我建议或一些解决方案,我将不胜感激。
最佳答案
如果我想检测滚动方向,我会执行以下操作:
var lastScrollTop = 0;
var isScrollingDown = false;
$(window).scroll(function (event) {
var currentScrollTop = $(window).scrollTop();
if (lastScrollTop > currentScrollTop ) {
isScrollingDown = false;
} else {
isScrollingDown = true;
}
// Do something
});
您可以在代码中使用此逻辑来按要求执行操作。
关于javascript - 向上滚动时如何淡出我的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37837524/