title: Bootstrap navbar overlapping content when using affix
body: <p>I want</p>
  
  <ul>
  <li>A site banner with a navbar below </li>
  <li>The banner to disappear when scrolling down, but the navbar to
  remain fixed</li>
  </ul>
  
  <p>I found this jsfiddle which provides the above solution:
  <a href="http://jsfiddle.net/DTcHh/541/" rel="nofollow">http://jsfiddle.net/DTcHh/541/</a></p>
  
  <p>Two main points of code:</p>
  
  <pre><code>//js
  $('#topnavbar').affix({
      offset: {
          top: $('#banner').height()
      }   
  });
  
  //css
  #topnavbar.affix {
      position: fixed;
      top: 0;
      width: 100%;
  }
  </code></pre>
  
  <p>My problem now is when you scroll down to the point where the 'affix' happens. If you look carefully at that point it kinda jumps, and now the navbar is overlapping the first 4 lines in the paragraph</p>
  
  <p>Any ideas how to get rid of that overlap? </p>