title: How do I make my header div scroll until it reaches the top of the page?
body: <p>I'm currently using fixed positioning to keep my header at the top of the page, even as users scroll. However, I'd like to add a logo and other content above the header, but not remain fixed like the header does. Is there a way to use CSS or HTML to have the header scroll normally with this content until the header reaches the top of the page, where it will act as it does now and hover above the text on the page?</p>
  
  <p><strong>Update</strong>
  <br>I'm not very experienced with jQuery and Javascript. This is the HTML code for my header: </p>
  
  <pre><code>&lt;div class="navbar-fixed-top" role="navigation"&gt;
      &lt;div class="container"&gt;
              &lt;ul class="pull-left"&gt;
                  &lt;li class="selected"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="about/index.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="clients/index.html"&gt;Clients&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
                  &lt;div class="logobackground"&gt;
                      &lt;a href="index.html"&gt;&lt;img class="logo" src="img/logo.png"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;ul class="pull-right"&gt;
                &lt;li&gt;&lt;a href=“mailto:........@...biz"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What Javascript or jQuery would I have to use and where would I put it in my site's directory?</p>