html - Bootstrap 4 导航 sticky-top 停止工作

Question

滚动时我的导航栏应该粘在顶部。这工作了一段时间，直到我尝试将登录按钮移到右侧。在多次尝试移动登录按钮失败后，我恢复到之前的状态，并且粘性导航栏停止工作。

这是导航栏的代码 https://codeshare.io/GLJmWV

根据我的谷歌搜索，我尝试了一些 CSS 类来修复它。我发现的所有内容要么不起作用，要么只是将导航栏固定到屏幕顶部，但这不起作用，因为我在导航栏上方有一个要开始的标题。

我尝试过:

• 位置:粘性
• 位置为固定、宽度为 100%、顶部为 0 的类
• 恢复到按预期工作的旧文件
• 右对齐
• 文本右侧
• 还有一些我目前不记得的其他事情

编辑: 这是整个页面的代码https://codeshare.io/a30RoL 这里也是我写的CSS代码https://codeshare.io/2W87m8

Answer 1

你的代码对我有用，但最好使用固定而不是粘性。请参阅this

这意味着问题出在其他地方，您是否尝试过复制 Bootstrap :

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">Fixed navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline mt-2 mt-md-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

Chrome 也存在一些问题，如果使用 Overflow:hidden，它将无法工作。