title: Setting Element To Position:Fixed Results In Ugly Page Jump
body: <p>On this website: EDIT</p>
  
  <p>I want <code>$("#menu")</code> to be affixed to the top of the page once you scroll past it, kind of like the header here: <a href="http://starwars.ea.com/starwars/battlefront" rel="nofollow">http://starwars.ea.com/starwars/battlefront</a></p>
  
  <p>The problem is when I do this, the page jumps up. I thought I could solve this with <code>$("#placeHolder")</code> but that doesn't work either.</p>
  
  <p>How can I do this like on the Battlefront website?</p>
  
  <p>My jquery (complete with debounce function) is below</p>
  
  <pre><code>function debounce(func, wait, immediate) {
      var timeout;
      return function() {
          var context = this, args = arguments;
          var later = function() {
              timeout = null;
              if (!immediate) func.apply(context, args);
          };
          var callNow = immediate &amp;&amp; !timeout;
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
          if (callNow) func.apply(context, args);
      };
  };
  
  $(window).scroll(function() {
  var myEfficientFn = debounce(function() {
  if($(window).scrollTop() &gt; $("#menu").height())
  {
  $("#menu").addClass("fixed");
  }
  else 
  {
  $("#menu").removeClass("fixed");
  }   
  }, 250);
  myEfficientFn();
  });
  </code></pre>
  
  <p>Thank you!</p>