Hallo Jungs Scrollen so ich versuche, um einen Effekt zu erhalten, arbeiten waren die navbar ist in der Mitte der Seite und der Benutzer wird nach unten scrollen, als er den navbar trifft es an die Spitze haften bleiben sollte Die Seite. Beispiel dafür: here Sie können sehen, wenn der Benutzer scrollt nach unten und trifft die Navbar es Stick und es ist eine schöne langsame Wirkung.Navbar Stick auf Header, wenn
Ich habe meins zu arbeiten, aber es fühlt sich klirrend an, damit meine ich, dass es sofort nach oben geht, im Gegensatz zu dem Beispiel, das sehr glatt ist und glatt an der Spitze klebt, während meins sehr hart ist.
.parallax {
background-color: Black;
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax1 {
background-color: Red;
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar {
margin-bottom: 0px;
left: 0;
top: 0;
width: 100%;
list-style: none;
height: 70px;
z-index: 1
}
.navbar-nav {
float: none;
margin: 0;
text-align: center
}
.navbar-nav>li {
float: none;
display: inline-block
}
.navbar-nav>li>a {
line-height: 38px
}
.navbar-nav>li>a.active {
background-color: #E7E7E7
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #333333;
background-color: #E7E7E7
}
.navbar-toggle {
background-color: #000000;
background-image: none;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 18px;
padding: 9px 10px;
position: relative
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #2DCC70
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #000000
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="parallax"></div>
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="700">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#hometab">Home</a></li>
<li><a href="#section1">About Me</a></li>
<li><a href="#section2">My Skills</a></li>
<li><a href="#section3">Portfolio</a></li>
<li><a href="#section4">Contact Me</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>1>
<div class="parallax1"></div>
Jede mögliche Hilfe würde groß sein.
Ich überprüfe meine Antwort aktualisiert, wenn jede Frage kommentieren die Antwort. –