Question

是否可以在幻灯片之间安装固定元素（文字在这里）？

我能实现这一目标的唯一方法是将文本元素放在幻灯片div之外。

            <div data-bind="foreach: people">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title"> <a data-bind="attr:{href:'#collapseOne'+$index()}, text:FirstName() +' '+ LastName()" @*href="#collapse_One"*@ class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"></a> </h4>
                    </div>
                    <div data-bind="attr:{id:'collapseOne'+$index()}" class="panel-collapse collapse in" @*data-bind="attr:{id:_collapseId, class:_collapsedIn}"*@>
                        <div class="panel-body">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>@Html.DisplayNameFor(x => x.Person.FirstName)</td>
                                        <td>@Html.DisplayNameFor(x => x.Person.LastName)</td>                                          
                                    </tr>
                                    <tr>
                                        <td><input data-bind="value: FirstName, name: FirstName" /></td>
                                        <td><input data-bind="value: LastName, name: LastName" /></td>
                                    </tr>

                                    <tr>                                        
                                        <td><a href='#' data-bind='click: $root.removePerson'>Remove Person</a></td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- ko foreach: Aliases -->


                            <table>
                                <tbody>
                                    <tr>
                                        <td>@Html.DisplayNameFor(x => x.Alias.FirstNameAlias)</td>
                                        <td>@Html.DisplayNameFor(x => x.Alias.LastNameAlias)</td>
                                    </tr>
                                    <tr>
                                        <td><input data-bind="value: FirstNameAlias, name: FirstNameAlias" /></td>
                                        <td><input data-bind="value: LastNameAlias, name: LastNameAlias" /></td>
                                    </tr>
                                    <tr>
                                        <td><a href='#' data-bind='click: $root.removeAlias'>Remove Alias</a></td>
                                    </tr>
                                </tbody>
                            </table>

                            <!-- /ko -->

                            <a href='#' data-bind='click: $root.addAlias'>Add Alias</a>
                        </div>
                    </div>
                </div>
            </div>

我不确定这是否是正确的方法，如果我错了，请纠正我。

这是我的fiddle

Answer 1

是的，没关系。

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

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

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

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

1 个答案: