Question

我有一个位于iframe中的页面。此页面是一个Twitter Bootstrap 3模板，带有Affix的导航。当页面直接加载（在iframe之外）时，nav和Affix工作正常，但在iframe中导航和Affix什么都不做 - 没有扩展子导航并且滚动它。

以下是我的nav / Affix代码的片段。

<div class="navbar bs-docs-sidebar hidden-xs" data-spy="affix" data-offset-top="0" data-offset-bottom="0">
    <h2>Index</h2>
    <ul class="nav bs-docs-sidenav">
        <li><a href="#generalAnswers">General FAQs</a>
            <ul class="nav">
                <li><a href="#group_15">Apprenticeships and Traineeships</a></li>
            </ul>
       </li>
    </ul>
    <a class="back-to-top" href="#top">Back to top</a>
</div>

注意：我使用Bootstrap docs网站上的CSS作为nav / Affix布局。

这些是否可以在iframe中使用？关于我如何解决它的任何想法？

Answer 1

您可以通过将目标修改为父窗口（iframe外部）来实现此目的：

$('#myAffix').affix({
    offset: {
        top: 100,
        target: window.parent
    }
})

请注意，target设置为window.parent，其中进行滚动和计算。这将成功启用affix插件。但是，还有一个问题是position: fixed在iframe中不能很好地发挥作用。我还没有找到办法克服这个问题。

Bootstrap Affix无法在Iframe中运行

1 个答案: