滚动时修复顶部的两个导航栏

Posted 2023-03-05

【中文标题】滚动时修复顶部的两个导航栏

【英文标题】：Fix two Navbars on top when scrolling

【发布时间】：2021-06-04 19:24:45

【问题描述】：

我有两个导航栏，你可以在这里查看代码：https://jsfiddle.net/5e3hbr8p/

但我希望它们即使在滚动到底部后也能保持在顶部。第一个导航栏和第二个导航栏都应该固定在顶部。我尝试了多种方法，但我认为我在这里忽略了一些小事情。

这是我的导航栏代码：

<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>

如何让它们都保持在顶部？

【参考方案1】：

您可以结帐CSS position:sticky

【讨论】：

当我使用这个时，只有第二个导航栏变得粘滞，而第一个导航栏消失了。

【参考方案2】：

.sticky 
  position: fixed;
  top: 0;
  width: 100%;

您可以在导航栏上添加您想要粘贴的 CSS 您可以通过 w3school 收集更多信息 访问：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky

【讨论】：

当我使用这个时，只有第二个导航栏变得粘滞，而第一个导航栏消失了。

你的两个Navbar上加了这个类吗？

是的，我已经添加了

不，第一个导航栏被第二个覆盖

好的。没问题..我修好了..请在下面添加第二个导航栏代码 .sticky_top_two position: -webkit-sticky;位置：粘性；顶部：50px； z指数：1020；并从第二个导航栏中删除（置顶）