更改Javascript动画

当用户向下滚动一点时，我使用此代码将导航栏更改为固定导航栏。如何使动画向上滑动而不是向下滑动？原来的小提琴可以在这里找到

var-nav=$（'.nav'）；
var scrolled=false；
$（窗口）。滚动（函数（）{
如果（20<$（窗口）.scrollTop（）&&！已滚动）{
nav.addClass（'visible'）.animate（{top:'0px'}）；
滚动=真；
}
如果（20>$（窗口）.scrollTop（）&&已滚动）{
导航removeClass（'visible'）。动画（'top'，'-30px'）；
滚动=假；
}
});

您可以设置

高度和
顶部的动画，以保持固定基线：

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

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

if（20<$（窗口）.scrollTop（）&&！滚动）{
nav.addClass（'visible'）.animate（{height:'20px'，top:'10px'}）；
滚动=真；
}
如果（20>$（窗口）.scrollTop（）&&已滚动）{
removeClass（'visible'）.css（{'height'：0，top:'30px'}）；
滚动=假；
}

如果这就是你要找的，也许你把你需要的解释错了

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

$(window).scroll(function () {

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

   if (20 > $(window).scrollTop() && scrolled) {
       nav.animate({ top : '-30px' });
       scrolled = false;      
    }
});

var-nav=$（'.nav'）；
var scrolled=false；
$（窗口）。滚动（函数（）{
如果（20<$（窗口）.scrollTop（）&&！已滚动）{
动画（{top:'0px'}）；
滚动=真；
}
如果（20>$（窗口）.scrollTop（）&&已滚动）{
动画（{top:'-30px'}）；
滚动=假；
}
});

你是说向上滑动而不是简单的隐藏？当滚动条到达顶部时。太棒了，这就是我需要的，除了导航条应该在顶部，而不是20像素以下。我试着把20px改成0，结果搞砸了。你需要在10之前修改顶级动画。。。顶部：“0px”。。。上图：“20px”这是一个基于原始答案的作品。
var nav = $('.nav');
var scrolled = false;

$(window).scroll(function () {

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

   if (20 > $(window).scrollTop() && scrolled) {
       nav.animate({ top : '-30px' });
       scrolled = false;      
    }
});