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

Question

我正在尝试在具有背景纹理的网站顶部构建一个带有 margin-top 的固定导航栏。我希望隐藏网站的内容，但向下滚动时导航栏，但我想一直保持这个空白边距。这是简单的 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/

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

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

我觉得我在这里遗漏了一些简单的东西......我希望你有任何提示!

妮可

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

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