滚动时引导导航栏不向下移动答案

【问题标题】：Bootstrap navbar not moving down while scrolling滚动时引导导航栏不向下移动
【发布时间】：2016-03-15 23:30:17
【问题描述】：

我一直在这里和其他几个网站上寻找答案。有一些，但我似乎无法让它继续工作。我有以下导航栏：

<nav class="navbar">
  <a href="#About">About me</a>
  <a href="#Education">Education</a>
  <a href="#Portfolio">Portfolio</a>
  <a href="#Contact">Contact</a>
</nav>

我已经尝试过在导航标签内部使用和不使用 div 容器。

这是相应的 CSS：

nav {
  text-align: center;
  position: fixed;
  top: 0;
  lef: 0;
  right: 0;
  height: 35px;
  padding-top: 15px;
  box-shadow: 0px 0px 8px 0px;
  -webkit-box-shadow: 0px 0px 8px 0px;
  -moz-box-shadow: 0px 0px 8px 0px;
  background-color: gray;
  width: 100%;
  z-index: 100;
}

我也试过没有 z-index: 100; 如果有人知道我缺少什么，或者如果我需要添加其他内容，我会很想看看它是什么以及我可以在哪里阅读它以便我得到它。

谢谢:)

【问题讨论】：

“不向下移动”到底是什么意思，你想要什么？当内容在其下方滚动时，导航栏应该保持固定在窗口顶部，还是应该随着内容滚动离开？
好的。那么为了澄清。当我向下滚动时，页面顶部的导航栏消失在屏幕上方。无论我向下滚动到哪里，我都希望它保持在屏幕顶部
hmm - 这就是“固定”应该做的事情。你能发布更多代码（页面的html，更多的css）吗？
我当然可以。这里又回到了固定属性。 codepen.io/Jspadgett82/pen/KzgvYV

标签： css navbar nav

【解决方案1】：

你有一个 .navbar 的 CSS 规则和 position: relative。这会覆盖nav 的固定设置

将!important 添加到您的位置：nav 的固定设置：

nav {
  text-align: center;
  position: fixed !important;

等等

这应该可以解决它。

http://codepen.io/anon/pen/ZWBwEW

【讨论】：

其实...有趣的是，我没有。不在我提供的 codepen 链接中。要么是那个，要么是我在事后修复了它，因为它在 nav css 中已修复。我可能已经编辑了它，因为我试图根据人们在这里告诉我的内容来弄清楚！无论哪种方式，一旦亲戚走了，它仍然不起作用。然而，你的 !important 让它自动工作，所以 tyvm！
我想，相对位置的 .navbar 规则似乎来自引导程序本身。我是使用浏览器的开发者工具找到的。
当我试图弄清楚这一点时，我确实在做一些事情。我也不知道那样会起作用。假设我需要开始弄清楚其他默认情况是什么，以免将来让自己头疼！哈！再次感谢！
或者，您也可以为包含position: fixed 的.navbar 类设置一个规则，这将覆盖.navbar 类的“内置”引导设置。
这个也不错。如果我不记得使用 !important hahah! 也会记住这一点

【解决方案2】：

你的位置：固定。还有一个错字“左”

【讨论】：

如上，我更改了 position 属性，但最上面的错字修复对我也不起作用。

【解决方案3】：

这里的每个人都帮了我，因为我确实有一个错字，而且我确实有我想要做的事情最终是正确的。

特别感谢 Johannes，我意识到如果您想像我一样尝试这样做，并使用 Bootstrap，请确保将 !important 放在 position:fixed; 后面。在您的 css 中，因为它在这方面覆盖了 Bootstraps 的默认属性，因此您无法在向下滚动时将导航栏保留在屏幕上！

【讨论】：