静态顶部导航，其中内容隐藏在滚动条上

Question

这是关于我要完成的工作的小提琴： http : //jsfiddle.net/60h84j7u/

我希望将副本隐藏在顶级导航div下方。 如果背景设置为透明以外的颜色，则可以完成此操作，但在这种情况下，top-nav的背景需要透明。

的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％，并将其放置在顶部导航下方，则可以将外部容器设置为隐藏溢出，并将内部容器设置为在上方滚动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中进行了测试。