我有两个导航栏在它们上面,你可以在这里查看代码:https://jsfiddle.net/5e3hbr8p/
但我希望它们即使在滚动到底部后也能保持在顶部。 First Navbar 和 Second Navbar 都应该固定在顶部。我尝试了多种方法,但我认为我在这里忽略了一些小事。
这是我的导航栏代码:
<nav class="navbar navbar-expand-sm bg-faded navbar-light sticky-top first-nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<a href="/" class="navbar-brand">One</a>
<div class="navbar-collapse collapse" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top second-nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar2">
<span class="navbar-toggler-icon"></span>
</button>
<a href="/" class="navbar-brand">Two</a>
<div class="navbar-collapse collapse" id="navbar2">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
如何让两者都保持在顶部?
答案 0 :(得分:0)
您可以结帐CSS position:sticky
答案 1 :(得分:0)
.sticky {
position: fixed;
top: 0;
width: 100%;
}
你可以在你想要粘贴的导航栏上添加这个css 您可以通过 w3school 访问收集更多信息:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky