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

你好吉尔，你可以在这里查找 W3school

还有一个示例，您可以使用inspect检查html代码 NavBar fixed Top

也在此处引导v4： NavBar

示例（引导程序）：

<nav class="navbar navbar-default navbar-fixed-top">
...      
</nav>

和CSS：

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}

我将使用框架类，因为它非常好，可以保持美观的跨浏览器和“相同或接近”的行为！

Answer 2

Bootstrap官方文档指出，这段代码应使导航栏位于顶部：

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

https://getbootstrap.com/docs/4.1/components/navbar/

相关的类是fixed-top，因此请将其添加到主导航容器中，它应该可以解决问题。

或者，您可以尝试将导航栏包裹在容器中，并使用常规位置工具

<div class="fixed-top">...</div>

https://getbootstrap.com/docs/4.1/utilities/position/

Answer 3

  <nav class="navbar navbar-default navbar-fixed-top">

添加上面的代码行后，导航栏被固定在页面的顶部，因此它位于顶部，并且在滚动时不会消失。

滚动时如何使引导导航栏停留在页面顶部？

3 个答案: