javascript - Fullpage.js，幻灯片之间具有固定元素

幻灯片之间是否可以有固定的元素(此处为文本)？

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

最佳答案

是的，没关系。

具有固定位置的元素和css3的translate3d属性的There's a bug in Chrome，尽管看起来可以在使用z-index时解决，因为您可以看到here。

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

无论如何，我相信最好还是选择。我们不知道Chrome是否会在以后针对此技巧更改其行为。