如何在 jquery & bootstrap 5 中的主要固定頂部導航欄下的特定部分的滾動上添加第二個粘性導航欄？

Question

我有一個帶有一個固定頂部導航欄的頁面。 然后我有3個部分。 在第二部分我有導航標簽。 滾動到第二部分后，我希望 nav-tabs 導航欄保持在頂部，在我的固定頂部導航欄下方。 當用戶滾動出第二部分時，導航選項卡導航欄應該消失，只有固定頂部的導航欄必須保留。

我找不到與我想要實現的目標相關的任何教程或指導。 知道如何使用 jquery 在引導程序 5 中執行此操作嗎？

index.html 
  <nav class="navbar navbar-expand-lg fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand m-1" href="#intro">Tarheeb EMS Presentation</a>
      <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain"
        aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
        <span></span>
            <span></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarMain">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">

          <li class="nav-item">
            <a class="nav-link" href="#">Introduction</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Platforms</a>
          </li>
           
          <li class="nav-item">
            <a class="nav-link" href="#">Comparison</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Summary</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
          </li>
        </ul>
      </div>
  </nav>


  <section class="1">
  ....
  </section>

   <section class="2">
    <nav>
      <div class="nav nav-tabs sticky" id="nav-tab" role="tablist">

          <button class="nav-link active" id="nav-cvent-tab" data-bs-toggle="tab" data-bs-target="#nav-cvent"
          type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Cvent</button>
          <button class="nav-link active" id="nav-cvent-tab" data-bs-toggle="tab" data-bs-target="#nav-cvent"
          type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Cvent</button>
          <button class="nav-link active" id="nav-cvent-tab" data-bs-toggle="tab" data-bs-target="#nav-cvent"
          type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Cvent</button>
          <button class="nav-link active" id="nav-cvent-tab" data-bs-toggle="tab" data-bs-target="#nav-cvent"
          type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Cvent</button>
          <button class="nav-link active" id="nav-cvent-tab" data-bs-toggle="tab" data-bs-target="#nav-cvent"
          type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Cvent</button>
          
      </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-cvent" role="tabpanel" aria-labelledby="nav-cvent-tab">
    </div>
     <div class="tab-pane fade show active" id="nav-cvent" role="tabpanel" aria-labelledby="nav-cvent-tab">
    </div>
     <div class="tab-pane fade show active" id="nav-cvent" role="tabpanel" aria-labelledby="nav-cvent-tab">
    </div>
     <div class="tab-pane fade show active" id="nav-cvent" role="tabpanel" aria-labelledby="nav-cvent-tab">
    </div>
     <div class="tab-pane fade show active" id="nav-cvent" role="tabpanel" aria-labelledby="nav-cvent-tab">
    </div>
    </div>
  </section>


  <section class="3">
  ...
  </section>

Answer 1

您可以通過固定主導航欄來實現這一點，或者粘性無關緊要。 只需將所需標題的 position 設置為position-sticky not sticky-top ，它會粘在您不想要的頂部。 您想要的是主導航欄下方的輔助導航欄，因此css top將其設置為12%或您需要的任何內容進行測試。 這是jsFiddle鏈接。

<section>
    <h1>Section 1</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, sint fuga ipsam soluta maxime in est ipsa modi explicabo impedit natus, dolore eum, voluptas sequi dicta ullam placeat expedita quos.</p>
</section>
<section>
    <h1 class="position-sticky" style="z-index: 2;top:10%">Section 2</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, sint fuga ipsam soluta maxime in est ipsa modi explicabo impedit natus, dolore eum, voluptas sequi dicta ullam placeat expedita quos.</p>
</section>
<section>
    <h1>Section 3</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, sint fuga ipsam soluta maxime in est ipsa modi explicabo impedit natus, dolore eum, voluptas sequi dicta ullam placeat expedita quos.</p>
</section>