title: Catch a div while scrolling to fix its position
body: <p>I'm trying to have a fixed vertical navigation bar but only once the user has scrolled down to it. I have placed it 66px under my heading and it needs to get caught once the user has scrolled down to its 66px margin and stay fixed on the screen I'm close but as you can see it's not perfect.
  <a href="https://jsfiddle.net/1krd9zpc/7/" rel="nofollow">https://jsfiddle.net/1krd9zpc/7/</a></p>
  
  <pre><code>$(window).on('scroll', function() {
  if($(window).scrollTop() &gt; $('#navbox').offset().top){
      $('#navbox').css({
          'top': $(window).scrollTop() &gt; 0 ? '0px' : '66px',
          'position': 'fixed'
      });
   }
  });
  </code></pre>
  
  <p>This code (improved by Mathias W) sort of works, when we scroll back up it needs to reset to its previous position.</p>