title: Two nav fixed nav bars on one page
body: <p>I want to have two fixed nav bars one on top and other at some center of the page. When scroll reach to second nav first should hide (or become relative) &amp;
  second should become fixed bar. And when we move up the second nav now become relative (not hide) and fist one will again start showing again.</p>
  
  <p><a href="http://jsfiddle.net/bhai22/Eg4Dg/1/" rel="nofollow">fiddle</a></p>
  
  <pre><code>&lt;div id="nav01"&gt;
  &lt;/div&gt;
  &lt;div class="content"&gt;&lt;/div&gt;
  &lt;div id="nav02"&gt;
  &lt;/div&gt;
  &lt;div class="content"&gt;&lt;/div&gt;
  
  
  #nav01
  {
      height: 100px;
      background: red;
      width: 100%;
      position: fixed;
      top: 0;
  }
  #nav02
  {
      height: 100px;
      background: blue;
      width: 100%;
  }
  .content
  {
      height: 2000px;
      background: #ccc;
      width: 100%;
  }
  </code></pre>
  
  <p>I have seen many jquery plugins but not found them useful - I am not good in scripting so need your help thanks in advance.</p>