html - Bootstrap 导航粘性停留在页面顶部

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

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