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

Question

我有两个导航栏，你可以在这里查看代码：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>

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

Answer 1

您可以结帐CSS position:sticky

Answer 2

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

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