滚动时如何使引导程序导航栏粘在页面顶部？

Question

我有一个 spring boot 项目，那是我的导航栏的照片。当用户向下滚动时，我希望导航栏粘在页面顶部，但我不知道该怎么做。我是前端新手，我正在努力了解引导程序、html 和 css 等。

   <nav class="navbar navbar-inverse">

     <div class="container">

      <!-- Brand and toggle get grouped for better mobile display -->

      <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="userProfile1">Home</a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="navbar-collapse-3">

      <ul class="nav navbar-nav navbar-right">

        <li><a href="/calendar">Calendar</a></li>

        <li><a href="/subjectSearch">Search</a></li>

        <li><a href="/logout">Logout</a></li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container -->

</nav><!-- /.navbar -->

这是我的 css 文件的样子：

h1 {

color: #78ab46;

 }

 .error-message {

      color: #a94442;

  }

 .error-message:first-letter {

     text-transform: capitalize;

 }

Answer 1

你好吉尔你可以在这里查看&nbsp;W3school此外，您还有一个示例，您可以使用检查导航栏固定顶部检查 html 代码还有这里的 bootstrap v4：&nbsp;NavBar示例（引导程序）：<nav class="navbar navbar-default navbar-fixed-top">...&nbsp; &nbsp; &nbsp;&nbsp;</nav>和CSS：.navbar-fixed-top {&nbsp; &nbsp; top: 0;&nbsp; &nbsp; border-width: 0 0 1px;}我会使用框架类，因为它非常适合保持美观的跨浏览器和“相同或接近”的行为！

Answer 2

<nav&nbsp;class="navbar&nbsp;navbar-default&nbsp;navbar-fixed-top">添加上面的代码行将导航栏固定在页面顶部，使其停留在顶部并且在滚动时不会消失。