Fullpage.js with fixed elements between slides

Question

Is it possible to have fixed elements (Text here) between just the slides?

The only way i could achieve this was by putting the text element outside of the slides div.

<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>

Am not sure whether this is the right way, please correct me if am wrong.

Here's my fiddle

score 2 · Accepted Answer · edited May 23 '17 at 12:06

Yeah, that's ok.

There's a bug in Chrome with fixed positioned elements and the css3 translate3d property, although it seems it can be solved when using z-index as you can see here.

.intro {
    position: fixed;
    -webkit-perspective: 1000;
    z-index:1;
}

In any case, I believe its better to go for your option. We don't know if Chrome will change its behavior in a future regarding this trick.

Fullpage.js with fixed elements between slides

1 Answers1