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

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/

基本上，向下滚动时内容隐藏在导航栏后面，这很酷，但在...

之后会重新出现在导航栏上方

我想做的是防止内容重新出现在导航栏上方：始终将导航栏和背景图像保持在顶部。我正在考虑用 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

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

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

Website Content disappearing behind fixed navbar with margin-top when scrolling

html

css

margin

fixed