title: Why adding a fixed position and translateY negative appears top 0 then hides?
body: <p>I'm trying to create a header (<a href="http://connect.mailchimp.com/" rel="nofollow">comparable to MailChimp's</a>) but instead of if being fixed all the time, I want the header to scroll up with the page and only drop down once the user has made an upward scrolling motion.</p>
  
  <p>I have this working at present by adding a class that has <code>postion: fixed;</code> and then applying <code>transform: translateY(-50px);</code> to position the header off screen. Here's the trick, when this happens, the <code>postion: fixed;</code> starts at what appears to be <code>top: 0;</code> and therefore shows itself before sliding up (I have a transition on the top to slide it up gracefully). Anyone know how I can force the header to start off canvas and then go transition to <code>transform: translateY(0);</code> when I queue it.</p>
  
  <p><a href="http://jsfiddle.net/ryanshrum/Lds3e/" rel="nofollow">JSFiddle</a></p>