Fullpage.js with fixed elements between slides
Is it possible to have fixed elements (Text here) between only slides?
The only way I could achieve this was by placing the text element outside of the div slides.
<div class="section" id="section1">
<div class="intro">
<h1>URL get updated (#)</h1>
<p>
Easy to bookmark and share
</p>
</div>
<div class="slide" id="slide1">
</div>
<div class="slide" id="slide2">
<img src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/iphone-blue.png" alt="iphone" id="iphone-two" />
</div>
</div>
Not sure if this is correct, please correct me if I am wrong.
Here's my fiddle
+3
source to share
1 answer
Yes, it is normal.
There is a bug in Chrome with fixed positioned elements and css3 property translate3d
, although it seems like it can be solved in use z-index
, as you can see here .
.intro {
position: fixed;
-webkit-perspective: 1000;
z-index:1;
}
In any case, I think it's better to go for your option. We don't know if Chrome will change its behavior in the future regarding this trick.
+2
source to share