CODEWITHSUNDEEP
javascripthtmlcss
adammm
adammm

Reputation: 55

Layered div not displaying in layers

I have two separate sections for a page that I am trying to build out. Layer 1 is over layer 2 and layer 2 is positioned fixed underneath so that it reveals after layer 1 is finished scrolling through content.

I can't get the layers portion to work with what I have so far. 

<!-- 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")
}

Any help or insight on this would be appreciated. TIA!

Upvotes: 0

Views: 149

Answers (1)

Henfs
Henfs

Reputation: 5411

You need an enough space availabe to show the second layer.
It's possible to make it adding some margin-bottom to wrapper element, for instance the body element:

body {
  margin: 0 0 100vh 0;
}

It applies a space height enough to view the layer underneath.
100vh is the height of the whole screen.

Upvotes: 1

Related Questions