Липкая навигация при загрузке остается в верхней части страницы

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

Я нашел решение, я использовал неправильную версию 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">

Answer 2

sticky-top просто применяет фиксированное положение к панели навигации сверху: 0 влево: 0, как только вы прокручиваете вниз за высоту панели навигации. Это фиксирует это к вершине области просмотра. Основная страница будет прокручиваться как обычно, но навигация останется фиксированной до верха - после того, как вы прокрутите ее. Она не будет следовать за полосой прокрутки, когда вы прокрутите ее.