title: Scroll one div over another
body: <p>I'm trying to get one div to overlap another div on scroll.</p>
  
  <p>I have a <a href="http://jsfiddle.net/MichaelT/9MFDB/" rel="nofollow">fiddle.</a></p>
  
  <p>What I want to do is have the #wrapper overlap the #header on scroll.</p>
  
  <p>Essentially the header is fixed then the wrapper overlays it.</p>
  
  <p>Would a stickey element and a z-index do this?</p>
  
  <p>Or is it a little more complicated.</p>
  
  <p>I had something similar <a href="http://www.cargocollective.com/btatest" rel="nofollow">here</a> but I cant get it to work on this fiddle (and yes I do change all the div names). </p>
  
  <p>Note: The fade on scroll is something I'll tackle at a later date.</p>
  
  <p>UPDATE:</p>
  
  <pre><code>html,
  body
  {
      margin:0;
      width:100%;
  }
  #header
  {
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:auto;
      background-size:100%;
  }
  #header img
  {
      width:100%;
      display:block;
      z-index:99;
  }
  #wrapper
  {
      width:100%;
      background-color:lightgrey;
      z-index:100;
      position:absolute;
  }
  #outer
  {
      margin:30px auto;
      padding-top:20px;
      position:relative;
      width:90%;
      height:1500px;
      background-color:red;
  }
  #inner
  {
      margin:0 auto;
      width:200px;
      height:250px;
      background-color:lightblue;
      top:20px
  }​
  </code></pre>
  
  <p>HTML Page:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en-UK"&gt;
      &lt;head&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="DivTest2.css" /&gt;
  
          &lt;title&gt;&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script type="text/javascript"&gt;
  
          $(document).ready(function()
  
              {var header_w=$('#header').height(); ...});
  
      $('#wrapper').css('margin-top',header_w+'px');
  
  $(window).resize(function()
  {
      header_w=$('#header').height();
  
      $('#wrapper').css('margin-top',header_w+'px');
      });
  });
  });&lt;/script&gt;
      &lt;div id="header"&gt;
      &lt;img src="http://davesizer.com/blogs/wp-content/uploads/2010/03/eva_jump.jpg" alt="Dog"&gt;
  &lt;/div&gt;
  &lt;div id="wrapper"&gt;
      &lt;div id="outer"&gt;
          &lt;div id="inner"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;​
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>