title: Sticky navbar makes content jump on way back up
body: <p>I Have a simple site set up with a header, navbar and content. When the page reaches the navbar, the position becomes fixed so the navbar sits at the top of the page - at this point, the navbar height also gets a bit smaller (as I like this effect) - I have done this by adding separate classes, fixed and thinner to the navbar.</p>
  
  <p>Most people are aware of the issue that occurs when you add "position:fixed" to an inline element in that it makes the content suddenly "jump" upwards. To counteract this i have added a div called "stop_the_jump" which is hidden until the navbar becomes fixed, at which point it is displayed in it's place. All of this runs smoothly on the way down, but as you scroll back up you get a jump due to the fact that the navbar is now thinner.</p>
  
  <p>I'm pulling my hair out over this one, how can I eliminate this jump that occurs on the way back up.</p>
  
  <p>Here is a JSFiddle clearly showing my issue:
  <a href="http://jsfiddle.net/gnac14qa/" rel="nofollow">http://jsfiddle.net/gnac14qa/</a></p>
  
  <p>My jQuery code is as follows:</p>
  
  <pre><code>$(window).scroll(function() {    
  
  var Scroll = $(window).scrollTop();
  var ScrollFXfullHeight = $('.header-wrapper').height();
  
  if (Scroll == ScrollFXfullHeight) {
  
  $("#navigation").addClass("fixed");
  $(".stop_the_jump").css('display','block');
  
  } else if (Scroll &gt; ScrollFXfullHeight) {
  if(!$("#navigation").hasClass('fixed')) {
      $(".stop_the_jump").css('display','block');
      $("#navigation").addClass("fixed");
  }
  $("#navigation").addClass("thinner"); 
  } else {
  $("#navigation").removeClass("thinner fixed");
  $(".stop_the_jump").removeClass("thinner");
  $(".stop_the_jump").css('display','none');
  }
  });
  </code></pre>
  
  <p>Any help would be much appreciated.</p>