CODEWITHSUNDEEP
csstransformz-indexfullpage.js
Alex H
Alex H

Reputation: 839

Is it possible for a position fixed element to pass both under and over sections using fullpage.js?

I have two components in a page, a position fixed element which covers the browser window which has a child image with transparent background, and a fullpage.js vertical slider powered by CSS transforms, with the following markup:

<body>
  <div class="fixed-element"><img src="transparent-bg-icon.png" /></div>
  <div id="fullpage-container">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
  </div>
</body>

I'd like the fixed element to display over the first section so the image is visible, and then the second section to slide over the image so the image disappears under the section. With the above markup this isn't possible with any combination of z-indexes, and if I put the fixed element inside #fullpage-container the position fixed of .fixed-element is no longer respected due to the transform on the parent.

Is there anyway to achieve this effect that I've missed?

Upvotes: 0

Views: 226

Answers (1)

Alvaro
Alvaro

Reputation: 41595

Doesn't sound like it is possible. Mainly because whenever you change the z-index (which will have to be on section leave or on section load by using the fullpage.js callbacks onLeave or onLoad) the image will suddenly appear or disappear:

  • When changing the z-index on onLeave, the image will disappear behind the 1st section while the section is moving to the destination.

  • When changing the z-index on afterLoad of the 2nd section, the image will be over the 2nd section for a small period of time before the 2nd section really stops moving. So you'll see how it suddenly disappears behind.

The only option I could see is:

  • You use the fullPage.js option scrollBar:true so you can get the current scroll position using the scroll event (or any library that do so). Then whenever you detect the fixed image is going to hit the 2nd section, change the z-index just right before it does. You will also be able to play with z-index even when placing the fixed element inside the wrapper. As fullPage won't be using css3 transformations anymore (although performance won't be that smooth)

Upvotes: 1

Related Questions