title: Sticky fixed header with different contents
body: <p>I want to make a header which will change on scroll event exactly like in <a href="http://www.webtutorialplus.com/sticky-header-on-scroll-jquery/" rel="nofollow">this site</a>. When cursor is on top of the page header will appear differently. When scroll down, header content will change and be fixed.</p>
  
  <p>I've found these examples (and many others) but they only shrink and becomes fixed, header content doesn't change at all.</p>
  
  <p><strong>Note:</strong> If possible, something with no 3rd party packages which slows down the page when loading, like many js files.</p>
  
  <p>Thanks</p>
  
  <ol>
  <li><a href="http://www.webtutorialplus.com/demo/sticky-header/default.html" rel="nofollow">Sticky header on scroll with jQuery and CSS</a></li>
  <li><a href="http://css-tricks.com/examples/PersistantHeaders/" rel="nofollow">Persistent Headers</a></li>
  </ol>
  
  <p><strong>FOR EXAMPLE:</strong></p>
  
  <pre><code>window.onscroll=function ()
  {
     //Based on given offset like 100px maximum
     if (scroll == down)
     {
       //Display header_2 as fixed header
     }
     else
     {
       //Display header_1 as fixed header
     }
  
  }
  
  &lt;div class="container"&gt;
     &lt;div id="header_1"&gt;BIG HEADER with no menu&lt;/header&gt;
     &lt;div id="header_2"&gt;SMALL HEADER with menu only&lt;/header&gt;
  &lt;/div&gt;
  </code></pre>