javascript - 分层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")
}

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

Answer 1

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

body {
  margin: 0 0 100vh 0;
}

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