上下导航动画高度

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