How can I create a sticky navigation bar using Bootstrap 3.0?

<div>  <h2>put what you want here</h2><br>  <p>just adjust javascript size to match this window</p><br></div></p>
<p><nav><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul>

html, body {<br>  height: 4000px;<br>}</p>
<p>.navbar-fixed {<br>  top: 0;<br>  z-index: 100;<br>  position: fixed;<br>  width: 100%;<br>}</p>
<h1>body_div {</h1>
<p>top: 0;<br>  position: relative;<br>  height: 200px;<br>  background-color: green;<br>}</p>
<h1>banner {</h1>
<p>width: 100%;<br>  height: 273px;<br>  background-color: gray;<br>  overflow: hidden;<br>}</p>
<h1>nav_bar {</h1>
<p>border: 0;<br>  background-color: #202020;<br>  border-radius: 0px;<br>  margin-bottom: 0;<br>  height: 30px;<br>}</p>
<p>//the below css are for the links, not needed for sticky nav<br>.nav_links {<br>  margin: 0;<br>}</p>
<p>.nav_links li {<br>  display: inline-block;<br>  margin-top: 4px;<br>}</p>
<p>.nav_links li a {<br>  padding: 0 15.5px;<br>  color: #3498db;<br>  text-decoration: none;<br>}<br>

$(document).ready(function() {<br>  //change the integers below to match the height of your upper div, which I called<br>  //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())<br>  //to figure out what the scroll position is when exactly you want to fix the nav<br>  //bar or div or whatever.  I stuck in the console.log for you.  Just remove when<br>  //you know the position.<br>  $(window).scroll(function () {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log($(window).scrollTop());

if ($(window).scrollTop() > 550) {
  $('#nav_bar').addClass('navbar-fixed-top');
}

if ($(window).scrollTop() < 551) {
  $('#nav_bar').removeClass('navbar-fixed-top');
}