Question

我希望使用jQuery在垂直滚动期间在不同的 Divs 中添加 Class 。我设法在滚动期间添加到第一个Div class，但无法找到其他人的解决方案。

这是我的jQuery代码。它正在运作

jQuery(window).scroll(function() {
    var scroll = jQuery(window).scrollTop();   
    if (scroll >=200 ) {
      jQuery('.feature-box').addClass('fadeInUp animated');
    } else {
        jQuery(".feature-box").removeClass("fadeInUp animated");
    }
    removeClass('fadeInUp animated');
});

我希望在滚动期间另一个类到另一个div。像这样的东西

jQuery(window).scroll(function() {
    var scroll_more = jQuery(window).scrollTop();   
    if (scroll_more >=400 ) {
      jQuery('.more-box').addClass('fadeInUp animated');
    } else {
        jQuery(".more-box").removeClass("fadeInUp animated");
    }
    removeClass('fadeInUp animated');
});

但它不会将类添加到more-box类。我在这里错过了什么吗？

提前致谢

Answer 1

这是一个提示（未经测试）：

jQuery( '.feature-box, .more-box' ).each( function() {

    var wt = jQuery( window ).scrollTop();
    var ct = jQuery( this ).offset().top;

    if( wt > ct ) {

        jQuery( this ).addClass( 'fadeInUp animated' );

    } else {

        jQuery( this ).removeClass( 'fadeInUp animated' );

    }

} );

可能你应该像这样早点触发：

wt > ( ct - 200 )

Answer 2

如果您想同时检查两个条件： -

if (scroll >=200 ) {
  jQuery('.feature-box').addClass('fadeInUp animated');
} else {
    jQuery(".feature-box").removeClass("fadeInUp animated");
}
if(scroll >= 400){
  jQuery('.more-box').addClass('fadeInUp animated');
} else {
    jQuery(".more-box").removeClass("fadeInUp animated");
}
removeClass('fadeInUp animated');

如果您只想要其中一个条件： -

if(scroll >= 400){
  jQuery('.more-box').addClass('fadeInUp animated');
} 
else if(scroll >= 200){
  jQuery('.feature-box').addClass('fadeInUp animated');
}
else {
    jQuery(".more-box").removeClass("fadeInUp animated");
    jQuery(".feature-box").removeClass("fadeInUp animated");
}
removeClass('fadeInUp animated');

使用jQuery将类添加到Window垂直滚动中的不同Div

2 个答案: