Having some difficulty figuring this out. I'm working on a bootstrap navbar that transitions from static to fixed when the user scrolls past the logo at the top. Everything seems to be working fine, except for when the navbar reaches the top, it suddenly jumps down, missing the first few lines of content. Can anyone provide guidance on how to fix this issue?
html
<div id="logo">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>BIG,</h1>
<h1>BIG LOGO!</h1>
</div>
</div>
</div>
</div>
<div id="nav-wrapper">
<div id ="nav" class="navbar navbar-inverse navbar-static-top">
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
css
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
java
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
View the JSFIDDLE demonstration
Appreciate any assistance you can provide!