html - 导航栏不会跟随用户

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:

The element is positioned relative to the browser window

这意味着它将相对于窗口固定在屏幕上。您可以在此处阅读有关 position 样式属性的更多信息:

Mozilla Developer Docs - Position