分层 div 未在图层中显示

Question

我正在尝试构建的页面有两个单独的部分。第 1 层位于第 2 层之上，第 2 层固定位于下方，以便在第 1 层完成滚动内容后显示。

我无法让图层部分与我目前所拥有的部分一起工作。

<!-- layer 1 -->
<div class="o-body-container">
<div class="o-container" role="document">
<main class="o-main" >
<article class="o-single-project u-padding projects type-projects" style="background: #333; min-height: 1050px; color: #fff; ">
</article>
</main>
</div>
</div>
<!-- layer 2 -->
<div class="o-info"><!-- begin hidden content -->
<div class="o-info__wrapper">
<main class="main-wrap" id="main">
<div class="main-wrap-inner">
<section class="lhs-wrap">
<p>This is fixed content hidden under layer 1</p>
</section>
</div>
</main>
</div>
</div>

.css

.o-main {
z-index: 1;
}
.o-info {
position: relative;
display: hidden;
}
.o-info__wrapper {
background-color: #000;
color: #FFF;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: -1
}

.js

function o() {
var e = t(".o-info__wrapper").outerHeight();
t(".o-info").css("height", e)
}
function a() {
var e = t(".o-main").outerHeight(),
i = t(".o-info").outerHeight();
t(window).scrollTop() >= t(document).height() - 2 * i ? t(".o-info").css("visibility", "visible") : t(".o-info").css("visibility", "hidden"), t(window).scrollTop() >= e ? t(".o-info__wrapper").addClass("o-info--stick") : t(".o-info__wrapper").removeClass("o-info--stick"), t(window).scrollTop() >= e - 600 ? t(".o-header").addClass("o-header--down-important") : t(".o-header").removeClass("o-header--down-important")
}

对此的任何帮助或见解将不胜感激。啪！

Answer 1

您需要足够的可用空间来显示第二层。
可以使其向包装元素添加一些margin-bottom，例如 body 元素：

body {
margin: 0 0 100vh 0;
}

它应用的空间高度足以查看下面的图层。
100vh是整个屏幕的高度。