Fullpage.js 在幻灯片之间具有固定元素答案

【问题标题】：Fullpage.js with fixed elements between slidesFullpage.js 在幻灯片之间具有固定元素
【发布时间】：2015-04-24 12:44:59
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html fullpage.js

【解决方案1】：

是的，没关系。

There's a bug in Chrome 具有固定定位元素和 css3 translate3d 属性，尽管使用z-index 时似乎可以解决，如您所见here。

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

无论如何，我认为最好还是选择您的选择。我们不知道 Chrome 将来是否会针对此技巧改变其行为。

【讨论】：