如何在 jquery & bootstrap 5 中的主要固定顶部导航栏下的特定部分的滚动上添加第二个粘性导航栏？答案

【问题标题】：How to add a second sticky navbar on scroll of a particular section, under the primary fixed-top navbar, in jquery & bootstrap 5?如何在 jquery & bootstrap 5 中的主要固定顶部导航栏下的特定部分的滚动上添加第二个粘性导航栏？
【发布时间】：2022-10-07 23:04:56
【问题描述】：

我有一个带有一个固定顶部导航栏的页面。然后我有3个部分。在第二部分我有导航标签。滚动到第二部分后，我希望 nav-tabs 导航栏保持在顶部，在我的固定顶部导航栏下方。当用户滚动出第二部分时，导航选项卡导航栏应该消失，只有固定顶部的导航栏必须保留。

我找不到与我想要实现的目标相关的任何教程或指导。知道如何使用 jquery 在引导程序 5 中执行此操作吗？

【问题讨论】：

标签： javascript html jquery css bootstrap-5

【解决方案1】：

您可以通过固定主导航栏来实现这一点，或者粘性无关紧要。只需将所需标题的位置设置为position-sticky 而不是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>

【讨论】：