title: Sticky header with variable height
body: <p>So, I need to have a header that's always displayed at the top of the viewport, even when the user scrolls down. That bit is fairly easy, using something like this:</p>
  
  <pre><code>body {
      padding-top: 100px; /* height of the header */
  }
  
  #header {
      position: fixed;
      top: 0;
      left: 50%;
      margin-left: -500px; /* Half the width of the header */
      width: 1000px;
      height: 100px;
  }
  </code></pre>
  
  <p>However, now my problem is that <strong>I don't always know how tall the header will be</strong>, because the client wants a top banner ad to also follow along, but that might not always be there.</p>
  
  <p>So, sometimes the header might look like this:</p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;img src="#" class="top_banner" /&gt;
      &lt;div id="headerbar"&gt;
          &lt;h1&gt;Site logo&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And sometimes it might look like this:</p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;div id="headerbar"&gt;
          &lt;h1&gt;Site logo&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The good news is that the banner ad will always have the same dimensions. So basically #header could be 100px without the banner, and 250px if the banner is there.</p>
  
  <p>My question to you is: is there a nice CSS ways to solve this? If not, how could I solve it using Javascript?</p>