Html 静态顶部导航，滚动显示隐藏在其后面的内容

以下是我试图实现的目标：

我希望副本隐藏在顶部导航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>

---

我认为，如果你想让滚动条位于浏览器的边缘，这是不可能的，除非你改变你的设计决定，使顶部导航透明，并做其他事情，例如添加背景颜色或显示相同内容的背景图像

如果在页面的可滚动部分周围添加2个固定容器*，将其高度设置为<100%，并将其放置在顶部导航下方，则可以将外部容器设置为隐藏溢出，并将内部容器设置为在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>

---

*在InternetExplorer11中测试。可能会严重破坏其他内容

为什么背景需要透明？如果你的背景是透明的，这意味着你希望下面的文本显示出来。不，他希望背景是透明的，但让文本停止显示在底边。我只是想知道为什么他需要透明，因为他们有其他的方式来完成我认为他想要完成的事情。

<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>

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

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