Question

当用户向下滚动时，我试图让水平导航栏粘在屏幕上。但是，导航栏并不坚持。

        <nav id="navbar" class="navbar navbar-inverse container affix-bottom" data-spy="affix" data-offset-top="197">
        <ul class="nav navbar-nav" style="float:left">
            <li><a href="#"><img src="logo-transparent.gif" style="height: 4em; margin-top: -1em;"/></a></li>
            <li><a href="#"><img src="logo-name.png" style="width: auto; height: 3em; margin-top: -1em;"/></a></li>
        </ul>
        <ul class="nav navbar-nav" style="float:right;">
          <li><button id="apply-button-nav" class="nav-button each-button">Apply</button></li>
          <li><button id="about-button-nav" class="nav-button each-button">About</button></li>
          <li><button id="sponsor-button-nav" class="nav-button each-button">Sponsor</button></li>
        </ul>
    </nav>

Answer 1

在样式中使用position:fixed。这解决了这个问题。

每个W3Schools：

元素相对于浏览器窗口定位

这意味着它将相对于窗口固定在屏幕上。您可以在此处详细了解position样式属性：

Mozilla Developer Docs - Position

Answer 2

将此添加到您的css：

.affix {
    position: fixed;
}

此外，为了在不使用词缀的情况下修复它，您不需要手动添加position: fixed，因为bootstrap提供了默认类。只需将类navbar-fixed-top添加到您的导航中，就像这样：

<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top container">

注意：如果您希望将其固定在底部，请改用此类：navbar-fixed-bottom。

Navbar不会关注用户

2 个答案: