title: Change Menu Bar size depending on the current div on screen
body: <p>I'm trying to make a menu bar that changes it's size depending on the div that is currently displayed on the screen. </p>
  
  <p>Something on the lines of this: <a href="http://housing.com/dsl" rel="nofollow">http://housing.com/dsl</a></p>
  
  <p>My current CSS for the menu and HTML Markups for the rest of the page are as follows:</p>
  
  <pre><code>&lt;div class="menu"&gt;
      &lt;a href="#content1"&gt;1&lt;/a&gt;
      &lt;a href="#content2"&gt;2&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="content"&gt;
      &lt;div class="content1" id="content1"&gt;
      &lt;/div&gt;
      &lt;div class="content2" id="content2"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.menu{
      width:100%;
      height:80px;
      background-color: #336699;
      margin-top:-20px;
      margin: 0 auto; 
      margin-bottom: 10px;
      position:fixed;
  }
  </code></pre>