title: Sticky header after some scrolling?
body: <p>okay here's an example of what i am trying to ask,
  the nav bar of <a href="http://www.usatoday.com" rel="nofollow noreferrer">usatoday</a>.</p>
  <p>I'm using bootstrap affix. here's my code</p>
  <pre><code>&lt;div class=&quot;header&quot;&gt;
    &lt;div class=&quot;header-1&quot;&gt;
      &lt;h1&gt;this is some logo&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class=&quot;header-2&quot;&gt;
      &lt;h3&gt;this is some heading&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;content&quot; style=&quot;height:2500px;&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;footer&quot;&gt;
      this is a footer
  &lt;/div&gt;
  </code></pre>
  <p>JavaScript</p>
  <pre><code>$('.header-2').affix({
  });
  </code></pre>
  <p>how can I make the div <code>header-2</code> to be fixed on the top, (when there is some scrolling and the div <code>header-2</code> just reach the top position) as of the site I've mentioned earlier?</p>
  <p>I would love to see the <code>header-1</code> and <code>header-2</code>, but some scrolling should hide <code>header-1</code> and stick <code>header-2</code> to the top most.</p>
  <p>thanks</p>