Question

我目前正在尝试将导航栏粘贴到页面顶部，然后再滚动到图像上方。我尝试遵循How to Add Affix to Bootstrap Fixed Bottom Navbar和Adding a header image before navbar-fixed-top的解决方案，但是，似乎无法让Navbar停留在屏幕上。

我的HTML代码是：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark" data-spy="affix" 
data-offset-top="50">

我的CSS是：

.affix {
   top: 0;
   width: 100%;
   position: fixed;
}

.affix-top {
   width: 100%;
}

我已导入的Bootstrap和JQuery：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

您能提供的任何帮助都会很棒

谢谢：）

Answer 1

对...所以经过了一段时间的搜索，我终于意识到问题出在哪里……我一直在遵循Bootstrap 4教程，直到我想要粘性的导航栏。然后，我不小心单击了Bootstrap 3的链接，而没有意识到。

要在Bootstrap 4中使导航栏保持粘滞状态，您只需要在导航类中添加“ sticky-top”，如下所示：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">

在导航栏中添加词缀

1 个答案: