[英]How to add a second sticky navbar on scroll of a particular section, under the primary fixed-top navbar, in jquery & bootstrap 5?
I have a page with one fixed-top navbar.我有一个带有一个固定顶部导航栏的页面。 Then I have 3 sections.
然后我有3个部分。 In 2nd section I have nav-tabs.
在第二部分我有导航标签。 Upon scrolling into the 2nd section, I want the nav-tabs navbar to stick to top, below my fixed-top navbar.
滚动到第二部分后,我希望 nav-tabs 导航栏保持在顶部,在我的固定顶部导航栏下方。 When user has scrolled out of the 2nd section, the nav-tabs navbar should disappear and only the fixed-top navbar must remain.
当用户滚动出第二部分时,导航选项卡导航栏应该消失,只有固定顶部的导航栏必须保留。
I can not find any tutorials or guidance related to what I'm trying to achieve.我找不到与我想要实现的目标相关的任何教程或指导。 Any idea how to do this in bootstrap 5 using jquery?
知道如何使用 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>
You can achive this by having primary navbar fixed or sticky does not matter.您可以通过固定主导航栏来实现这一点,或者粘性无关紧要。 Just set the position of the required heading to
position-sticky
not sticky-top
which sticks to top which you don't want.只需将所需标题的 position 设置为
position-sticky
not sticky-top
,它会粘在您不想要的顶部。 what you want is a secondary nav bar below the primary so css
is helpfull set top
to 12%
or whatever you need just test it.您想要的是主导航栏下方的辅助导航栏,因此
css
top
将其设置为12%
或您需要的任何内容进行测试。 This is jsFiddle link.这是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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.