Люди подскажите как лучше писать и не путать мозги. На странице при скролле в определенных моментах(ну сколько отскролили) вызываются события анимации 1-го элемента. Я обычно пишу код так:
var sto=$(window).height();
$(window).scroll(function() {
var ofi2=$('.two p').eq(0).offset();
var ofi3=$('.tree').offset();
var ofi4=$('.four').offset();
if(ofi2.top<$(this).scrollTop()+sto) {
$('.seps span').stop().animate({top:'492px'}, 900);
};
if(ofi3.top<$(this).scrollTop()+sto) {
$('.seps span').stop().animate({top:'692px'}, 900);
}
if(ofi4.top+150<$(this).scrollTop()+sto) {
$('.seps span').stop().animate({top:'871px'}, 900);
}
});
То есть я получаю какуе-то высоту от элемента и как доскролим до него будет какой-то эффект. Проблема в том что эти высоты конфликтуют между собой. То есть если самая большая высота подходит под правило то и сама нижняя тоже подойдет!!! Получается полная путаница и пока дойдет до работоспособного эффекта то весь мозг сломаю. И так в каждом проекте где есть такие запросы по скроллу.
Скажите как лучше такое писать? Может есть какая то библиотека? Как лучше?
Спасибо большое!