Bootstrap Nav Scroll FIx

by wamosjk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="jumbotron">
  <div class="container text-center">
    <p>"Blabla"</p>
    <h1>blasa</h1>
    <p>Ssasasasdsad sadsaas</p>
  </div>
</div>


<nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">sadsadasd</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">hgfgfsf</a></li>
          <li><a href="#">dsasafew</a></li>
          <li><a href="#">dsadsaf</a></li>
          <li><a href="#">dsadasd</a></li>
          <li><a href="#">Cdas</a></li>
        </ul>
      </div>
    </div>
  </nav>

CSS

body{
  min-height:200vh;
}
.fixed{
  position:fixed;
  top:0;left:0;
  width:100%;
}
.jumbotron{
  margin-bottom:0;
}

JavaScript

jQuery(document).ready(function() {
  var navOffset = jQuery("nav").offset().top;
  jQuery(window).scroll(function() {
    var scrollPos = jQuery(window).scrollTop();
    if (scrollPos >= navOffset) {
      jQuery("nav").addClass("fixed");
    } else {
      jQuery("nav").removeClass("fixed");
    }
  });
});