向上滚动到页面顶部时，如何将导航栏保持在顶部？答案

【问题标题】：How can I keep the navbar at top when scrolling up past the top of the page?向上滚动到页面顶部时，如何将导航栏保持在顶部？
【发布时间】：2016-10-21 07:57:10
【问题描述】：

在 Safari 和 Mac 版 Chrome 等浏览器中，当您在页面开头尝试向上滚动时，您仍然可以向上滚动一点，但会遇到阻力，当您松开时页面会弹回去吧。

我的页面顶部有一个导航栏。当用户向上滚动超过页面顶部时，导航栏会随着页面的其余部分向下移动，如this demo video。即使在此滚动过程中，如何使导航栏保持在页面顶部？

【问题讨论】：

那么，您希望导航栏保持在页面顶部吗？
你能为此创建一个jsfiddle吗？
@Thinker 仅当页面“反弹”时，顶部没有空白。在所有其他情况下，导航栏将停留在页面的停止位置，当页面滚动时，它会像往常一样移出视图。
你能展示你尝试过的东西吗？
@frnt 我的错：recordit.co/nz2Sd8ermb

标签： html css scroll overscroll

【解决方案1】：

我猜你想创建一个“粘性标题”，当你向下滚动时它会留在页面顶部。您可以通过在导航栏上使用 CSS“位置”规则来做到这一点：

position: fixed;
top: 0;

注意：这可能是 this question 的副本。

【讨论】：

【解决方案2】：

试试这个解决方案，我只是根据你的 gif 猜测。

html,body{overflow:hidden} （或）
#nav{position:fixed;top:0; or margin-top : 0;} （或）
$("#navbar").css("marginTop",'0')

在第三个示例中，您可以尝试使用变量保存您的 css 值，然后使用 if 条件您可以尝试并可能摆脱反弹效果。

【讨论】：

【解决方案3】：

我认为唯一的方法是禁用反弹效果。弹跳效果在 HTML 标记本身上起作用，因此没有绝对或固定定位会使其保持不变。尝试在溢出时将隐藏属性应用于 html 标记，如下所示： html {overflow: hidden}

【讨论】：