Bootstrap 5 nav-scroller - 向下滚动页面时如何保持在导航栏下的屏幕上

Question

我喜欢 Offcanvas navbar example 中的第二个导航栏。如何防止它在向下滚动页面时消失？

<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
    <div class="container-fluid">
         <a class='navbar-brand'>Brand</a>
    </div>
</nav>

您可以水平滚动浏览此处的链接。当用户向下滚动页面时，我希望它像上面的导航栏一样固定在屏幕上

<div class="nav-scroller bg-body shadow-sm">
    <nav class="nav nav-underline" aria-label="Secondary navigation">
      
      <a class="nav-link" href="#">Link 1</a>
      <a class="nav-link" href="#">Link 2</a>
    </nav>
</div>

这是我下载的 bootstraps 示例文件中的 css。我没有在我的项目中添加它。我只是为 bootstrap 使用 cdn，但水平滚动仍然有效。我在文档中找不到 .nav-scroller，我是否错误地认为它包含在 cdn 中？

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

解决方法 有点让它像这样工作：

<nav class="nav nav-underline fixed-top" aria-label="Secondary navigation" style="margin-top: 56px; background-color: white; border-bottom: 1px solid light-gray; padding-bottom: 1px;">

Answer 1

您需要将 fixed-top 添加到 .nav 并将 margin-bottom:1rem; 添加到 .nav-scroller

.nav-scroller {
  z-index: 2;
  overflow-y: hidden;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow:hidden;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
main{
  margin-top:8rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="nav-scroller fixed-top shadow-sm ">
  <!--       FIRST NAV     -->
  <nav class="navbar  navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
         <a class='navbar-brand'>Brand</a>
    </div>
   </nav>
<!--       SECOND NAV     -->
    <nav class="nav bg-white" aria-label="Secondary navigation"> 
      <a class="nav-link" href="#">Link 1</a>
      <a class="nav-link" href="#">Link 2</a>
    </nav>
</nav>

<main class="">
<div class="">
  <h1> content here </h1>
</div><br><br><br><br><br><br><br><br><br><br>
<div>
  <h1>more content here </h1>
</div><br><br><br><br><br><br><br><br><br><br>
<div>
  <h1>more content here </h1>
</div><br><br><br><br><br><br><br><br><br><br>
  </main>

Bootstrap 5 nav-scroller - 向下滚动页面时如何保持在导航栏下的屏幕上

Bootstrap 5 nav-scroller - how to keep on screen under navbar when scrolling down page

css

twitter-bootstrap