title: how can I stick the div after scrolling down a little
body: <p>I wanted to stick the 2nd div when we scroll down the page and when the 2nd div meets the top boundary. When it's fixed, it should scroll along with the other pages. How can I achieve this?</p>
  
  <pre><code>#settings{
      width:100%;
      background:#383838;
      height:60px;
  }
  #menu{
      width:100%;
      position:relative;
      height:100px;
      background:#aaa;
  }
  #body-content{
      height:900px;
      position:relative;
  }
  </code></pre>
  
  <p>and the HTML </p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="top"&gt;
      &lt;div id="settings"&gt;
      &lt;/div&gt;
      &lt;div id="menu"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="body-content"&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Here in this example <a href="http://jsfiddle.net/WBur3/">http://jsfiddle.net/WBur3/</a> , the 2nd div should be fixed when we scroll the page. When we scroll up, should turn into the previous state itself. Please help me.</p>