jquery - 固定导航菜单 - 如何使用 JavaScript 进行动画进出？

Question

我正在尝试创建一个固定的导航菜单，当用户滚动超过 500 像素时，该菜单就会出现，当用户向上滚动页面时，该菜单就会消失。

但是，我不希望它只是出现和消失，而是以滑动的方式进出动画。

我在 Stackoverflow 上找到了这个问题的部分答案 ( link )。 JSFiddle解决方案:http://jsfiddle.net/k3AHM/1/

var nav = $('.nav');
var scrolled = false;

$(window).scroll(function () {

if (500 < $(window).scrollTop() && !scrolled) {
    nav.addClass('visible').animate({ top: '0px' });
    scrolled = true;
}

if (500 > $(window).scrollTop() && scrolled) {
    nav.removeClass('visible').css('top', '-30px');
    scrolled = false;      
}

上述代码的工作原理是，当用户超过 500 像素时，固定导航菜单会以动画方式显示出来。但是，当用户向上滚动屏幕时，我需要菜单再次退出，而不是立即消失。

如果有人可以建议对 javascript 进行更改，以允许菜单以动画方式进出，我将不胜感激？

谢谢!

Answer 1

你可以这样做:

http://jsfiddle.net/k3AHM/4/

 if (500 > $(window).scrollTop() && scrolled) {
   //animates it out of view
   nav.animate({ top: '-30px' });  
   //sets it back to the top
    setTimeout(function(){
       nav.removeClass('visible');
    },500);
    scrolled = false;      
}