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

2ic8powd 于 2022-10-09 发布在 jQuery

关注(0)|答案(1)|浏览(122)

我有一个页面，上面有一个固定顶部的导航栏。那么我有三个部分。在第二部分中，我有导航标签。滚动到第二部分时，我希望导航选项卡导航栏位于固定顶部导航栏下方的顶部。当用户滚动出第二部分时，导航选项卡导航栏应该消失，只有固定顶部的导航栏必须保留。

我找不到任何与我试图实现的目标相关的教程或指导。你知道如何在bootstrap 5中使用jQuery做到这一点吗？

来源：https://stackoverflow.com/questions/73835354/how-to-add-a-second-sticky-navbar-on-scroll-of-a-particular-section-under-the-p

1条答案

按热度按时间

s2j5cfk01#

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

赞(0）回复(0）举报 2022-10-09

我来回答

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

1条答案

相关问题

热门标签

最新问答