Навигация анимирует высоту вверх и вниз

$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
    $('.nav').css('margin-top', '5px');
     $('.sep').css('margin-top', '20px');
     $('.logo').fadeOut(500);
     $('#navWrap').animate({
        height: '62px'
        }, 500, function() {
        });
}
}
);
$(window).scroll(function () {
 if ($(window).scrollTop() < 100) {
      $('.nav').css('margin-top', '23px');
     $('.sep').css('margin-top', '40px');
     $('.logo').fadeIn(500);
}
}
);

У меня есть этот код, который заставляет мою навигацию анимировать высоту от 100 пикселей до 62 пикселей при прокрутке вниз, я пытаюсь заставить его анимировать обратно до 100 пикселей, когда вы снова достигаете вершины, но, похоже, не может этого сделать.

Обычно я снова включаю .animate в функцию .scroll второго окна, но это ничего не делает.


scroll jquery nav jquery-animate
person Maxim Siebert    schedule 26.02.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы были близки, требуется всего несколько модификаций.

  • Во-первых, нужно отслеживать текущее состояние навигатора. В противном случае каждый раз, когда вы прокручиваете, вы будете добавлять в цепочку анимации новый запрос, чтобы сделать ее больше или меньше. Вы хотите запускать анимацию только тогда, когда вы пересекаете «порог» 100 сверху.
  • Во-вторых, вы хотите вызвать stop() перед анимацией, или прокрутка вниз, а затем вверх приведет к тому, что каждая новая анимация попадет в очередь, а панель навигации будет открываться и закрываться.
  • В-третьих, вам не нужны два вызова $(window).scroll... у вас есть исключительное условие. Либо вы больше или меньше 100 сверху, и вы выполняете свои изменения CSS и анимации, только если вы еще этого не сделали. Помещение его в ту же функцию упрощает управление.

var navsize = "large";
$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        if (navsize == "large")
        {
            navsize = "small";
            $('.nav').css('margin-top', '5px');
            $('.sep').css('margin-top', '20px');
            $('.logo').stop().fadeOut(500);
            $('#navWrap').stop().animate({
                height: '62px'
            }, 500);
        }
    }
    else
    {
        if (navsize == "small")
        {
            navsize = "large";
            $('.nav').css('margin-top', '23px');
            $('.sep').css('margin-top', '40px');
            $('.logo').stop().fadeIn(500);
            $('#navWrap').stop().animate({
                height: '100px'
            }, 500);
        }
    }
});
person Plynx    schedule 26.02.2013
comment
Одна проблема с этим подходом заключается в том, что он анимируется каждый раз, когда запускается событие прокрутки. В идеале я бы сделал это с переходами CSS3, но по крайней мере измените .stop() на .stop(true, true), чтобы предотвратить заполнение очереди анимации. - person Blender; 26.02.2013
comment
@Blender В этом случае в очереди никогда не будет более одного события. Я думаю, что затухание и затухание логотипа также могут нуждаться в stop(). Без сомнения, увидев этот классный эффект, пользователи будут двигать полосой прокрутки вверх и вниз у порога, чтобы посмотреть, что произойдет. - person Plynx; 26.02.2013
comment
Кажется, он работает нормально, но в Chrome немного глючит, когда я нажимаю «Вверх». @Blender Я использовал переходы CSS для остальных изменений, которые я делаю, но по какой-то причине высота навигации была единственной, которая не работала должным образом с простым переходом. - person Maxim Siebert; 02.03.2013