html - 静态顶部导航，滚动时内容隐藏在它后面

Question

这是关于我想要完成的事情的 fiddle :http://jsfiddle.net/60h84j7u/

我希望副本隐藏在顶部导航 div 下方。如果背景设置为透明以外的其他设置，我可以做到这一点，但在这种情况下，顶部导航的背景需要是透明的。

HTML

<div class="wrapper">
    <div class="top-nav">This needs to be at top</div>

    <div class="copy"><p>This needs to hide below the top-nav as the user scrolls thru the page.</p></div>
</div>

CSS

.wrapper {
    width: 500px;
    height: 200px;
    /*border: 1px solid purple;*/
}
.top-nav {
    position: fixed;
    top: 0;
    border: 1px solid red;
    background: transparent;
}

.copy {
    position: relative;
    top: 40px;
    border: 1px solid green;
    overflow: hidden;
}

Answer 1

如果您希望滚动条位于浏览器的边缘，我认为这是不可能的，除非您更改设计决策以使顶部导航透明并执行其他操作，例如添加背景颜色或背景图像这表明了同样的事情。

如果您在页面的可滚动部分周围添加 2 个固定容器*，将它们的高度设置为 < 100% 并将它们放置在顶部导航下方，您可以将外部容器设置为 overflow hidden ，并设置内部容器在 y 轴上滚动。这并没有真正产生很好的结果。

<div class="wrapper">
    <div class="top-nav">This needs to be at top</div>

    <div id="outercontainer">
        <div id="innercontainer">
            <div class="copy"><p>This needs to hide below the top-nav as the user scrolls thru the page.</p></div>
        </div>
    </div>
</div>

使用 CSS:

.outercontainer {
    position: fixed;
    top: 40px;
    height: 90%;
    width: 100%;
    overflow: hidden;
}

.innercontainer {
    position: fixed;
    height: 90%;
    width: 100%;
    overflow-y: scroll;
}

* 在 Internet Explorer 11 中测试。可能会严重破坏其他任何东西