Question

这是一个关于我想要完成的事情的小提琴：http://jsfiddle.net/60h84j7u/

我希望副本隐藏在top-nav 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个固定容器*，请将其高度设置为＆lt; 100％并将它们放在您的top-nav下，您可以设置外部容器以隐藏溢出，并将内部容器设置为在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中测试过。可能会在其他任何方面出现可怕的突破

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

1 个答案: