Fullpage.js 幻灯片之间有固定元素

Question

是否可以在幻灯片之间放置固定元素（此处为文本）？

我能做到这一点的唯一方法是将文本元素放在幻灯片之外 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>

不知道这样的做法对不对，如有错误请指正

这是我的fiddle

Answer 1

是的，没关系。

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

无论如何，我相信你的选择更好。我们不知道 Chrome 将来是否会改变其关于此技巧的行为。

Fullpage.js 幻灯片之间有固定元素

Fullpage.js with fixed elements between slides

javascript

jquery

html

fullpage.js