Добавить класс к различным дивам в окне вертикальной полосы прокрутки с помощью JQuery

Question

Я хочу, чтобы добавить класса в различных дивах во вертикальной прокрутки использованием jQuery. Мне удалось добавить к первому 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');