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

I want to add a Class in different Divs during Vertical Scroll using jQuery. I managed to add to the first Div class during scroll but couldn't find the solution to others.

我想在Vertical Scroll中使用jQuery在不同的Div中添加一个Class。我设法在滚动期间添加到第一个Div类但无法找到其他人的解决方案。

Here's my jQuery Code. It's working

这是我的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');
});

And I want another class to another div during scrolling. Something like this

我想在滚动期间另一个类到另一个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');
});

But it wont add Class to more-box class. Am I missing anything here?

但是它不会将Class添加到更多的类。我在这里遗漏了什么?

Thanks in advance

提前致谢

2 个解决方案

#1

If you want both the conditions to be checked simultaneously:-

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

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 you want only one of the conditions to be true:-

如果您只希望其中一个条件成立: -

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

#2

Here is a hint (not tested):

这是一个提示(未经测试):

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

    }

} );

Probably you should trigger a bit earlier like this:

可能你应该像这样早点触发一下:

wt > ( ct - 200 )

#1