title: Bootstrap affix navbar for single page with scrollspy and page anchors
body: <p>This is for a single page, with a navbar that links to local anchors only.<br>
  The navbar comes after a header, but sticks to top when scrolling down.</p>
  
  <p>You can see how it works <a href="http://thomaslissajoux.github.io/publish/" rel="nofollow">on github pages</a></p>
  
  <p>But I've got two offset problems with link/anchors:</p>
  
  <ul>
  <li>as long as you don't scroll, the anchors are offset and masked by the navbar.</li>
  <li>once the navbar is affixed, the following links work as intended but not the first one.</li>
  </ul>
  
  <p>A body margin breaks the layout as it prevents the header from beginning right at the top:</p>
  
  <pre class="lang-css prettyprint-override"><code>body {
      margin-top: 65px;
  }
  </code></pre>
  
  <p>I've tried without success to play with margin/padding for the sections:</p>
  
  <pre class="lang-css prettyprint-override"><code>section {
      padding-top: 65px;
      margin-top: -65px; 
  }
  </code></pre>
  
  <p>Here are the <a href="https://github.com/thomaslissajoux/publish/blob/gh-pages/index.html" rel="nofollow">html</a> and <a href="https://github.com/thomaslissajoux/publish/blob/gh-pages/style.css" rel="nofollow">css</a></p>
  
  <ul>
  <li>Any idea how to fix that?</li>
  <li>Can it be solved with pure css?</li>
  <li>Or do I need some js fix to account for the affix?</li>
  </ul>