我有一个用于我正在处理的小测试站点的导航栏，我需要一些帮助。我正在使用 Bootstrap(您可能会说)但无法弄清楚如何在您向下滚动时让我的导航栏保持在屏幕顶部。我希望导航栏保持在超大屏幕下方，直到您滚动到它通常会离开屏幕的位置。当它开始离开屏幕时，我希望它留在屏幕顶部，但在必要时返回。我在 JQuery 文件中尝试了不同的代码，例如:
$('.navbar-default').affix({
offset: {
top: 50
}
});
如果有人能够提供帮助，我们将不胜感激。
下面是我的HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hope's Seed</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="JS/style.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<div class = "header">
<div class="jumbotron text-center">
<h1>Hope's Seed</h1>
<p>You're Not Alone</p>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
</nav>
<div class="bg">
<div class="container-fluid">
<div class="row">
<img class="img-responsive" src="Images/plantgrow.jpg">
<div>
</div>
</div>
</body>
</html>
我的 CSS 代码(可能有一些冗余，我还没有回去清理它):
.header .jumbotron {
color:#fff;
background-color:#a1ff7c;
font-family:Roboto Condensed;
margin-bottom:0px;
}
.navbar-default {
background-color: #78c45a;
border: 0px;
font-family:Roboto Condensed;
margin-bottom:0px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #78c45a;
}
.navbar-default .navbar-nav > .active > a:hover{
background-color: #5a9344;
color: #fff;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-default .navbar-nav > li > a:hover {
color: #fff;
background-color: #5a9344;
}
.navbar-default .navbar-brand {
color: #fff;
}
.navbar-default .navbar-brand:hover {
background-color:#5a9344;
color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-toggle {
border: 0px;
}
.navbar-default .navbar-toggle:hover {
background-color:#5a9344;;
}
p {
font-family: Roboto Condensed;
}
.bg .img-responsive {
width:100%;
height:auto;
}
.jumbotron {
padding-top:1%;
padding-bottom:1%;
}
.jumbotron h1 {
margin-top:0px;
}
.jumbotron p {
margin-bottom:0px;
}
.navbar-nav {
display:table;
width:100%;
margin: 0;
}
.navbar-nav > li {
float:none;
display:table-cell;
text-align:center;
}
.container-fluid{
padding-left:0px;
padding-right:0px;
}
#myNavbar{
padding-left:0px;
padding-right:0px;
}
最佳答案
使用 fixed Bootstrap navbar ，你需要做的就是给导航栏一个 navbar-fixed-top 的类:
<nav class="navbar navbar-default navbar-fixed-top">
我假设您还希望您的绿色自定义标题贴在屏幕顶部，导航栏上方。您还需要为其提供相同的类，同时为导航栏提供一个等于自定义标题高度的 top 偏移量:
<div class="header navbar-fixed-top">
.navbar.navbar-default {
top: 155px;
}
我创建了一个 fiddle 来展示这个 here .
希望对您有所帮助! :)
关于jquery - 粘性 Bootstrap 导航栏不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42989729/