我有一个 Spring Boot 项目,这是我的导航栏的照片。我希望当用户向下滚动时导航栏固定在页面顶部,但我不知道该怎么做。我是前端新手,正在努力了解 bootstrap、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;
}
最佳答案
你好,吉尔,你可以在这里查找 W3school
这里还有一个示例,您可以使用检查检查 html 代码 NavBar fixed Top
这里还引导 v4: NavBar
示例( Bootstrap ):
<nav class="navbar navbar-default navbar-fixed-top">
...
</nav>
和CSS:
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
我会使用框架类,因为它非常适合保持跨浏览器的美观和“相同或接近”的行为!
关于java - 如何使引导导航栏在滚动时粘在页面顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51842636/