引导导航粘滞留在页面顶部答案

【问题标题】：Bootstrap navigation sticky stays on top of page引导导航粘滞留在页面顶部
【发布时间】：2018-10-13 01:53:30
【问题描述】：

我的 Bootstrap 导航栏有问题。我正在使用粘性模式，如文档中所述：

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

<router-outlet (deactivate)="onDeactivate()"></router-outlet>
<app-footer></app-footer>

当我打开页面时，导航栏在其顶部，正如预期的那样，但是当我滚动它时，它停留在页面顶部，而不是屏幕顶部（因此它不跟随滚动条）。我对它如何工作的理解是错误的，还是上面的代码有问题。是否有可能因为我现有的代码库而无法正常工作（我的页面几乎准备好了，并想在最后添加它）。

【问题讨论】：

标签： html css angular twitter-bootstrap

【解决方案1】：

我找到了解决方案，我使用了错误版本的 Bootstrap。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">

相反，我现在正在使用

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

【讨论】：

【解决方案2】：

当您向下滚动超过导航栏的高度时，sticky-top 只会将固定位置应用于 top:0 left:0 的导航栏。这会将其锁定到视口的顶部。底层页面将正常滚动，但导航将保持固定在顶部 - 在您滚动过去之后。一旦滚动过去，它就不会跟随滚动条。

【讨论】：

我了解它是如何工作的，我只是想知道为什么它不适合我。似乎更改为 navbar-dark bg-dark 没有视觉效果（只是字体变白，条保持灰色）。引导程序和我的代码之间是否有可能发生名称冲突？
"dark" 是灰色的。如果我没记错的话，是不是类似于#333。不，两者之间不应该有名称冲突。此外，“sticky”使用并非所有浏览器都能识别的“sticky” CSS 属性。因此，它可能对一个有效，但对另一个无效。在不同的浏览器中测试它。 Firefox 58 及更低版本、Chrome 63 及更低版本和 Safari 7 及更低版本无法使用“粘性”。
我是否正确地将引导程序包含在 Angular 中？我在 index.html 头部添加了 maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/…">。
我不是 Angular 开发人员，所以很遗憾，我无法在这方面为您提供帮助。