Klasse zu verschiedenen Divs in Window vertikalen Scroll mit jQuery

Question

ich eine Klasse in verschiedenen Divs während Vertical Scroll mit jQuery hinzufügen möchten. Ich schaffte es, die erste Div class während scroll hinzuzufügen, konnte aber die Lösung für andere nicht finden.

Hier ist mein jQuery Code. Es funktioniert

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

Und ich will eine andere Klasse zu einem anderen div beim Scrollen. So etwas wie dies

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

Aber es wird nicht die Klasse zu more-box Klasse hinzuzufügen. Fehle ich hier etwas?

Vielen Dank im Voraus

Answer 1

Hier ist ein Hinweis (nicht getestet):

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

    } 

}); 

Wahrscheinlich sollten Sie etwas früher wie folgt auslösen:

wt > (ct - 200) 

Answer 2

Wenn Sie beide wollen die gleichzeitig zu überprüfenden Bedingungen: -

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

Wenn Sie nur eine der Bedingungen erfüllt sein: -

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