导航的Bootstrap 4 Sticky-top停止工作

Question

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

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

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

我已经尝试过：

• 位置：粘性
• 位置：固定，宽度：100%，顶部：0 的类
• 恢复到按预期工作的旧文件
• 右对齐
• 文本右
• 以及其他一些我暂时不记得的事情

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

Answer 1

您的代码适用于我，但最好使用固定而不是粘性。见this

这意味着问题出在其他地方，您是否尝试过复制引导程序：

<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，它就不起作用了。