title: Website Content disappearing behind fixed navbar with margin-top when scrolling
body: <p>I'm trying to build a fixed navbar with a margin-top on top of a website which has a background texture.
  I'd like the content of the website to be hidden but the navbar when scrolling down but I want to keep this empty margin-top the all time.
  Here is the over simple html:</p>
  
  <pre><code>&lt;nav&gt;
      My Fixed navbar with margin on top
  &lt;/nav&gt;
  &lt;div id="content"&gt;
      My content that shouldn't apppear in the margin-top of the navbar
  &lt;/div&gt;
  </code></pre>
  
  <p>I have made a jfiddle to explain my problem:
  <a href="https://jsfiddle.net/nicoj/ttL3mp4r/8/" rel="nofollow">https://jsfiddle.net/nicoj/ttL3mp4r/8/</a></p>
  
  <p>Basically the content is hiding behind the navbar when scrolling down which is cool but is reappearing above it after...</p>
  
  <p>What I would like to do is to prevent the content from reappearing above the navbar: Keeping the navbar and the background image on top the whole time.
  I was thinking of having the #content fixed too with an overflow: scroll but then the scrollbar is embedded inside the content which I don't want.</p>
  
  <p>I feel like I'm missing something simple here...
  I hope you have any tips!</p>
  
  <p>Nico</p>