title: Parallax scroll with sticky header
body: <p>thanks in advance for any suggestions. I'm trying to build a site that uses a basic parallax scroll element. Basically, the header is positioned 60% from the top of the page. As the user scrolls, the content below the header catches up to the header and flows underneath it. </p>
  
  <p>I can get all this to work perfectly, but I'd also like the header to stick to the top of the page when it gets up there. I've gotten it to sort of work, but when the header is stuck, it's very flashy/jumpy. I've seen other people with similar problems, and they seem to stem from switching the header position from static to fixed, but in my layout, the header is always fixed, so I'm a bit perplexed. Maybe the positioning I'm using seems a bit strange, but after much experimentation, this is the closest I could get it.</p>
  
  <p>Here's a JSFiddle, and the code:</p>
  
  <p><a href="http://jsfiddle.net/kromoser/Lq7C6/11/" rel="nofollow">http://jsfiddle.net/kromoser/Lq7C6/11/</a></p>
  
  <p>JQuery:</p>
  
  <pre><code>$(window).scroll(function() {
      var scrolled = $(window).scrollTop();
      if (scrolled &gt; $('#header').offset().top) {
          $('#header').css('top','-60%');
       }
      else {
          $('#header').css('top',(0-(scrolled*0.6))+'px');
       }
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  #header {
    position: fixed;
    top: 0;
    margin-top: 60%;
    z-index: 3;
    background: #FFF;
    width: 100%;
  }
  #content {
    min-height: 100%;
    position: relative;
    top: 100%;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="header"&gt;This header should stick to top when scrolled.&lt;/div&gt;
  &lt;div id="content"&gt;Content goes here&lt;/div&gt;
  </code></pre>
  
  <p>Thanks for any help!</p>