_x000D_
$(document).ready(function() {_x000D_
_x000D_
$(window).scroll(function () {_x000D_
//if you hard code, then use console_x000D_
//.log to determine when you want the _x000D_
//nav bar to stick. _x000D_
console.log($(window).scrollTop())_x000D_
if ($(window).scrollTop() > 280) {_x000D_
$('#nav_bar').addClass('navbar-fixed');_x000D_
}_x000D_
if ($(window).scrollTop() < 281) {_x000D_
$('#nav_bar').removeClass('navbar-fixed');_x000D_
}_x000D_
});_x000D_
});
_x000D_
html, body {_x000D_
height: 4000px;_x000D_
}_x000D_
_x000D_
.navbar-fixed {_x000D_
top: 0;_x000D_
z-index: 100;_x000D_
position: fixed;_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
#body_div {_x000D_
top: 0;_x000D_
position: relative;_x000D_
height: 200px;_x000D_
background-color: green;_x000D_
}_x000D_
_x000D_
#banner {_x000D_
width: 100%;_x000D_
height: 273px;_x000D_
background-color: gray;_x000D_
overflow: hidden;_x000D_
}_x000D_
_x000D_
#nav_bar {_x000D_
border: 0;_x000D_
background-color: #202020;_x000D_
border-radius: 0px;_x000D_
margin-bottom: 0;_x000D_
height: 30px;_x000D_
}_x000D_
_x000D_
.nav_links {_x000D_
margin: 0;_x000D_
}_x000D_
_x000D_
.nav_links li {_x000D_
display: inline-block;_x000D_
margin-top: 4px;_x000D_
}_x000D_
.nav_links li a {_x000D_
padding: 0 15.5px;_x000D_
color: #3498db;_x000D_
text-decoration: none;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="banner">_x000D_
<h2>put what you want here</h2>_x000D_
<p>just adjust javascript size to match this window</p>_x000D_
</div>_x000D_
_x000D_
<nav id='nav_bar'>_x000D_
<ul class='nav_links'>_x000D_
<li><a href="url">Nav Bar</a></li>_x000D_
<li><a href="url">Sign In</a></li>_x000D_
<li><a href="url">Blog</a></li>_x000D_
<li><a href="url">About</a></li>_x000D_
</ul>_x000D_
</nav>_x000D_
<div id='body_div'>_x000D_
<p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>_x000D_
</div>
_x000D_