Html 滚动时，网站内容消失在带有页边空白的固定导航栏后面

我试图建立一个固定的导航栏，在一个有背景纹理的网站上加上一个页边空白。 我想网站的内容被隐藏，但导航栏时，滚动下来，但我想保持这个空白页顶部的所有时间。 以下是简单的html：

<nav>
    My Fixed navbar with margin on top
</nav>
<div id="content">
    My content that shouldn't apppear in the margin-top of the navbar
</div>

我的固定导航栏顶部有边距
我的内容不应该出现在导航栏的页边空白处

我用小提琴来解释我的问题：

基本上，内容是隐藏在导航栏后向下滚动，这是很酷的，但在它上面重新出现后

我想做的是防止内容重新出现在导航栏上方：始终保持导航栏和背景图像在顶部。 我也在考虑用一个溢出：滚动来修复#内容，但是滚动条被嵌入了我不想要的内容中

我觉得我错过了一些简单的事情。。。 我希望你有任何提示

---

Nico

考虑到你的背景也是固定的，有一个非常简单快捷的方法来解决这个问题：

HTML

<div id="overlay">  
</div>
<nav>
    fixed navbar
</nav>
<div id="content">
    My content that should not appear above the navbar
</div>

---

我相信有更好的方法来解决这个问题，但这似乎是一个简单问题的简单解决方法。

当然。。。我一直在寻找大炮解决方案，但这很酷。干杯

#overlay {
   position: fixed;
    background-image: url("http://allroundnews.com/wp-content/uploads/2012/02/seamless-wood-texture-free-76.jpg");
    width: 100%;
    height: 50px;
    margin: 0;
    top: -20px;
    margin-left: auto;
    margin-right: auto;
}