$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 300) {
$('.nav-fixed-container').addClass('fixed');
} else {
$('.nav-fixed-container').removeClass('fixed');
}
});
});
body {
margin:0;
}
/*add the fixed height here.. we could also retrieve this using jquery*/
.nav-container {
height:130px;
width:100%;
margin:0;
white-space: nowrap;
font-size: 0;
}
.masthead {
width:100%;
background:red;
margin:0;
font-size:18px;
}
.logo {
width:90px;
height:90px;
background:purple;
font-size:18px;
}
.body {
width:100%;
height:1800px;
background:green;
padding:0;
font-size:18px;
}
li {
float:left;
list-style:none;
margin-right:20px;
font-size:18px;
}
.nav {
background:blue;
width:100%;
height:40px;
}
.nav-fixed-container {
width:100%;
transition: 0.5s ease-In-Out;
}
.fixed {
position:fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-container">
<div class="nav-fixed-container">
<div class="masthead">
<div class="logo">logo</div>
</div>
<div class="nav">
<ul>
<li>menu link 1</li>
<li>menu link 2</li>
<li>menu link 3</li>
<li>menu link 4</li>
</ul>
</div>
</div>
</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed fringilla diam, at facilisis eros. Nulla molestie urna neque, ac tristique odio ullamcorper et. Nulla nec elit non velit euismod consectetur. Fusce rhoncus pharetra imperdiet. Suspendisse quis felis maximus, porttitor ante at, egestas augue. Pellentesque est augue, venenatis in felis vitae, venenatis malesuada nunc. In eget fermentum neque. Sed vitae dapibus diam. Fusce vehicula augue eu ornare euismod. Etiam rutrum eu turpis in ullamcorper. Mauris facilisis faucibus rutrum
<br><br><br>. Sed ac justo et purus luctus cursus. Nulla non sapien molestie ipsum bibendum mollis.
Integer convallis sodales dui, in cursus tellus vestibulum sit amet. Integer id enim laoreet, vehicula metus et, condimentum urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id commodo dolor, vel commod<br><br><br><br>o odio. Nam ipsum nisl, volutpat ac sapien aliquet, suscipit consectetur nisi. Mauris scelerisque risus dui, sed viverra libero rhoncus et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridicul<br><br><br>us mus. Sed blandit, ante in dapibus posuere, urna leo efficitur ipsum, in ornare ligula nunc et eros.
<br><br>
Ut bibendum libero dolor, quis tempor est dapibus nec. Etiam dapibus justo ac risus mattis, nec convallis augue tincidunt. Duis varius id ligula sed scelerisque. Nam at elementum mauris. Nullam<br><br><br> mattis, mauris sit amet dapibus lobortis, diam nibh gravida neque, nec rutrum nunc mauris sed elit. Nulla et est consectetur, dapibus felis at, fermentum ante. Sed orci ipsum, luctus ac imperdiet vitae, ornare sit amet leo. Quisque sit amet dolor neque. Aenean ac lorem quam. Curabitur massa est, rhoncus ac iaculis sit amet, maximus id ante. Aene<br><br>an aliquam tincidunt nunc sit amet hendrerit. Nulla consectetur velit vitae dignissim dictum. Vivamus gravida pharetra sem in vestibulum. Nulla </div>
Wenn Sie Position verwenden: fixed nehmen Sie den Header aus dem Fluss - das bedeutet, dieser Inhalt unter es springt auf .. Sie müssen das Offset – sol
Bogdan, scheint Ihr Code gut zu funktionieren. Der Sprung findet statt, weil die Funktion ausgelöst wird und der Header fixiert wird. Dadurch wird der Rest des DOM-Inhalts nach oben verschoben, wenn der Header aus dem Dokumentfluss entfernt wird. Wickeln Sie es in ein Div mit einer festen Höhe, die der Höhe des Nav entspricht. es wird das Springen stoppen. –
Es könnte nur Meinung sein ... aber auch mit einem so großen Header kann ein bisschen viel aus einer UX-Perspektive sein. Versuchen Sie nur, das tatsächliche nav zu reparieren und es zu reparieren, wenn es die Oberseite des Fensters –