网站内容在滚动时在固定导航栏后面消失，并带有边距顶部

Question

我正在尝试在带有背景纹理的网站顶部创建具有边缘顶部的固定导航栏。 我想要隐藏网站的内容，但滚动时向下的导航栏，但我希望保持这个空的边缘的所有时间。 这里是在简单的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> 

我已经做了jfiddle解释我的问题： https://jsfiddle.net/nicoj/ttL3mp4r/8/

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

我想要做的是防止内容重新出现在导航栏上方：保持导航栏和背景图像始终位于顶部。 我正在考虑让#content使用overflow：scroll进行修复，但随后滚动条被嵌入到我不想要的内容中。

我觉得我在这里错过简单的东西... 我希望你有任何提示！

尼科

Answer 1

考虑的事实，你的背景也是固定的，有解决这个漂亮的快速简便的方法：

HTML

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

CSS

#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; 
} 

Fiddle

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