上下導航動畫高度

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，當你再次到達頂部，但似乎無法這樣做。

我通常在第二個窗口中包含.animate .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); 
     } 
    } 
});