当你向下滚动时,我正试图让元素淡入。当我向下滚动到div开始的那一点时,我希望它们显示出来,我得到了第二个横幅,但第三个横幅内容不会淡入。另外,即使第二个横幅代码有效,也应该有一个更好的方法,也许可以重复使用。我似乎无法弄明白。任何帮助,将不胜感激。
$(window).on('scroll', function() {
if($(this).scrollTop() > 100) {
$('.second-banner-content').addClass('animated fadeInUp slow');
$('.second-banner-img').addClass('animated fadeInUp slow');
}
});
$(window).on('scroll', function() {
if($(this).scrollTop() > 300) {
$('.third-banner-content').addClass('animated fadeIn slow');
}
});
您可以使用像AOS这样的插件,或者您可以计算高度并尝试这样的事情
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).addClass('animated fadeInUp slow');
}