title: Fixed Nav when you scroll down
body: <p>Once i scroll down about 300px, i want my nav to become fixed at the top. I also want to change the style slightly on that nav.</p>
  
  <p>Exactly like on this website: 
  <a href="http://demo.themeruby.com/maple/?home_layout=classic&amp;light_style=1#038;light_style=1/page/2/" rel="nofollow">http://demo.themeruby.com/maple/?home_layout=classic&amp;light_style=1#038;light_style=1/page/2/</a></p>
  
  <p>This is the JSFiddle for the one i copied: <a href="http://jsfiddle.net/ianclark001/wELFH/" rel="nofollow">http://jsfiddle.net/ianclark001/wELFH/</a></p>
  
  <pre><code>.nav {
  width: 100%;
  position: relative;
  text-align: center;
  background-color: white;
  padding: 16px;
  display: inline-block;
  }
  
  .nav.clone {
  width: 100%;
  position: fixed;
  text-align: center;
  background-color: yellow;
  padding: 16px;
  display: inline-block;
  -webkit-transition: 0.2s top cubic-bezier(.3,.73,.3,.74);
  transition: 0.2s top cubic-bezier(.3,.73,.3,.74);
  }
  
  body.down nav.clone {
  top: 0;
  }
  </code></pre>
  
  <p>I don't understand why i need to mention body.. I know there is lots on this on this website but i cant find anything that fixes my issue.
  jQuery:</p>
  
  <pre><code>$(document).ready(function() {
  var $nav = $("nav"),
    $clone = $nav.before($nav.clone().addClass("clone"));
  
  $(window).on("scroll", function() {
  var fromTop = $("body").scrollTop();
  $('body').toggleClass("down", (fromTop &gt; 300));
    });
  });
  </code></pre>