Bootstrap5nav-scroller-向下滾動頁面時如何在導航欄下保持螢屏-有解無憂

我喜歡Offcanvas 導航欄示例中的第二個導航欄。向下滾動頁面時如何阻止它消失？

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

這是我下載的引導示例檔案中的 css。我沒有在我的專案中添加這個。我只是使用 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;">

uj5u.com熱心網友回復：

您需要添加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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/451822.html

標籤：css 推特引导

上一篇：如何更改選擇選項中第一個元素的顏色？

下一篇：核心電話CTCarrier和isoCountryCode。如何獲取用戶當前的蜂窩提供商所在的國家/地區？