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

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：滚动但滚动条嵌入到我不想要的内容中。

我觉得我在这里遗漏了一些简单的东西...... 希望大家给点建议！

尼哥

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

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