Any ideas on how to solve my issue with a sticky nav bar in Twitter Bootstrap? Whenever I scroll past a certain point, the navbar sticks but causes my content to jump. I want the content to stay in place without jumping.
Here is my HTML code:
<body>
<div class="top_menu_wrapper">
<div class="toggle_wrapper">
<ul>
<li>
<div class="main_menu_header">
<div class="navbar-header">
<button class="navbar-header collapsed move-navtoggle"
data-target="#main-menu" data-toggle="collapse"
type="button">
<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>
</li>
</ul>
</div>
<div id="main-menu" class="collapse navbar-collapse main_menu">
<ul class="nav navbar-nav home-nav">
<li class="nav_item">
<a href="#">About Us</a>
</li>
<li class="nav_item">
<a href="#">Services</a>
</li>
<li class="nav_item">
<a href="#">News & Events</a>
</li>
<li class="nav_item">
<a href="#">Volunteer</a>
</li>
<li class="nav_item">
<a href="#">Donate</a>
</li>
<li class="nav_item">
<a href="#">Contact Us</a>
</li>
</ul>
<div class="clearboth"></div>
</div>
</div>
<div class="content">
<p>some content</p>
</div>
</body>
This is my JS code:
$(window).scroll(function () {
if ($(window).scrollTop() > 186) {
$('.top_menu_wrapper').addClass('navbar-fixed-top').css({
margin: '0 auto',
width: '1024px',
'border-top': '6px solid #6097dd'
});
} else {
$('.top_menu_wrapper').removeClass('navbar-fixed-top').css({
width: '100%',
'border-top': 'none'
});
}
});
I attempted to create a jsfiddle to demonstrate the issue, but couldn't replicate it. JSFIDDLE