Question

我的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>

当我打开页面时，导航栏位于顶部，正如预期的那样，但是当我滚动它时，它会停留在页面顶部，而不是屏幕顶部（因此它不跟随滚动条）。我是否理解它是如何工作的，或者上面的代码是错误的。是否有可能因为我现有的代码库而无法工作（我的页面几乎准备就绪，并希望最后添加它）。

Answer 1

粘性顶部只需将固定位置应用于顶部的导航栏：0向左：0向下滚动超过导航栏的高度。这会将其锁定到视口的顶部。底层页面将正常滚动，但导航将保持固定在顶部 - 滚过它后。滚动浏览后，它不会跟随滚动条。

Answer 2

我找到了解决方案，我使用了错误版本的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">

Bootstrap导航粘贴停留在页面顶部

2 个答案: