Javascript 使用scrollTop（）获得平滑过渡

我正在尝试稍微取消我们大学网站上的固定标题，并想出了一种方法，我认为这对那些屏幕较小的人来说非常有用，但仍然让那些喜欢标题的人感到高兴，不管他们在页面上的什么位置

很难解释我的问题，因此这里有一个示例链接：

代码：

$（'body'）。前置（'MENU'）；
$（窗口）。滚动（函数（）{
如果（$（'.header'）。是（':hover'）{
$（'.header'）.css（'top'，'0px'）；
}
如果（$（this.scrollTop（）<85）{
$（'.header'）.css（{'position'：'absolute'，'top'：'0px'}）；
$（'.header content'）.fadeIn（100）；
}
else if（$（this）.scrollTop（）>85）{
$（'.header'）.css（{'position'：'fixed'，'top'：'-85px'}）；
$（'.header content'）.fadeOut（100）；
}
});
$（'.show menu'）。单击（函数（）{
$（'.header'）.animate（{'top'：'0px'}，150）；
$（'.header content'）.fadeIn（400）；
});

页眉有一个绝对位置，直到窗口滚动超过85px，然后停留在顶部，出现一个小菜单按钮。如果用户位于屏幕的下部，他们可以单击“菜单”使标题向下滑动以显示。我唯一的问题是，当用户再次滚动时（如果他们没有悬停在header元素上），header应该向上滑动。目前它只是“跳”回来

我在header元素中添加了CSS转换，修复了它，但使其他区域中断

我只是好奇，是否有人对如何使这一切顺利有任何想法

---

谢谢

当您调用页眉内容淡出时，它似乎没有意义，因为页眉在页面上已经不可见了。所以我想你们应该先做淡出，然后再隐藏标题，类似这样的事情

$('.header-content').fadeOut(200, function(){
   $('.header').css({'position': 'fixed', 'top': '-85px'});
});

---

CSS转换几乎是我认为对这一点有意义的唯一方式，除非您想使用缓慢的jQuery

.animate（）

方法（这可能会或可能不会破坏更少的东西）。显然，您需要详细说明CSS转换解决方案的中断，并对此进行研究。不过很酷。我喜欢你对网站所做的一切。当用户再次滚动时，if语句的哪一部分会在你所说的场景中运行？if是最后一个

else if

语句你是否尝试过减缓

标题内容的
淡出。100毫秒是非常快的。褪色也不同于滑动
slideOut（400）
，除非我把你的问题弄糊涂了。谢谢你的回答。当添加CSS转换时，标题确实会像它应该的那样向上/向下滑动，但是当用户第一次滚动超过85px标记时，以及当用户向后滚动超过85px标记时，标题顶部会出现小故障。这里有一个例子：对不起，是的，淡出是不必要的。它实际上只是在那里，因为我想让5px的header元素突出，但是在header中有一些元素通常会突出超过那个点。这只是为了淡出标题中的内容，这样当标题元素出现时，就不会因为显示少量内容而显得尴尬。希望这有意义！
$('.header-content').fadeOut(200, function(){
   $('.header').css({'position': 'fixed', 'top': '-85px'});
});