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

Creating a Sticky Navigation Bar Using Bootstrap

When a website loads, users often prefer navigation bars to appear consistently at the top of the page. As the user scrolls down, the navigation bar should scroll up and eventually become fixed to the top of the screen. This guide demonstrates how to achieve this using Bootstrap 3.0.

Solution Using JQuery and JavaScript:

<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>

Copy after login

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');
}

Copy after login