title: Change header background colour when page scrolls
body: <p>I've been looking at a solution for this but I cannot get it to work.</p>
  
  <p>I would like my page header to change from a transparent background to a white background as the user begins scrolling the page.</p>
  
  <p>HTML code is:</p>
  
  <pre><code>&lt;div class="header"&gt;
      &lt;div class="topbar"&gt;&lt;/div&gt;
      &lt;div class="sitelogo"&gt;&lt;/div&gt;
      &lt;nav id="navigation"&gt;
          &lt;ul&gt;
              &lt;li id="twitter"&gt;&lt;a href="http://www.twitter.com/iamdanmorris"&gt;&lt;em&gt;Twitter&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#blog"&gt;Blog&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div style="clear:both;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS code is:</p>
  
  <pre><code>.header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 0;
      z-index: 10000;
      -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
      -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
      transition: all 0.2s ease-in-out;
      height: auto;
      background-color:transparent;   
  }
  </code></pre>