Ich habe eine Navbar für eine kleine Testseite, an der ich arbeite, und ich brauche Hilfe damit. Ich benutze Bootstrap (wie Sie wahrscheinlich wissen), aber ich kann nicht herausfinden, wie Sie meinen Navbar-Stick an den oberen Rand des Bildschirms, wenn Sie nach unten scrollen. Ich möchte, dass die Navigationsleiste unter dem Jumbotron bleibt, bis Sie zu dem Punkt scrollen, an dem sie normalerweise vom Bildschirm verschwinden würde. Wenn es vom Bildschirm verschwindet, möchte ich, dass es oben auf dem Bildschirm bleibt, aber bei Bedarf wieder hochfährt. Ich habe verschiedenen Code in JQuery Dateien versucht, wie zum Beispiel:Sticky Bootstrap Navbar funktioniert nicht
$('.navbar-default').affix({
offset: {
top: 50
}
});
Wenn jemand in der Lage zu helfen, wäre es sehr geschätzt werden.
Unten ist mein HTML-Code
<!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>
Mein CSS-Code (es wahrscheinlich einige Entlassungen sind, ich habe es nicht zurückgegangen und aufgeräumt noch):
.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;
}
Haben Sie 'Position versucht: fixed'? –
Wechsel zur Position: behoben macht meine Navbar auf die linke Seite des Bildschirms in einer wirklich peinlichen Art und ist nicht das, was ich genau suche. Ich möchte, dass die Navigationsleiste an ihrem Platz bleibt, bis sie vom Bildschirm verschwindet. Dann möchte ich, dass sie oben auf dem Bildschirm bleibt. –