навигации анимировать высоты вверх и вниз

Question

$(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); 
} 
} 
); 

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

Обычно я включаю .анимать снова во втором окне .scroll, но это ничего не делает.

Answer 1

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

• Во-первых, вам необходимо отслеживать текущее состояние навигатора. В противном случае при каждом прокрутке вы добавите в цепочку анимации новый запрос, чтобы сделать его большим или маленьким. Вы только хотите вызвать анимацию, когда вы пересекаете «порог» из 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); 
     } 
    } 
});