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>

我已经做了一个小问题来解释我的问题： 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

我确定有更好的方法可以解决这个问题，但这对于一个简单的问题来说似乎很容易解决。

滚动时网站内容在固定导航栏后面以margin-top消失

1 个答案: