twitter-bootstrap - Bootstrap Affix 在 iframe 中不起作用

Question

我有一个 iframe 内的页面。这个页面是一个 Twitter Bootstrap 3 模板，带有一个带有 Affix 的导航。当页面直接加载(在 iframe 之外)时，导航和 Affix 工作正常，但在 iframe 内，导航和 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 文档网站的 CSS 进行导航/附加布局。

这些应该在 iframe 中工作吗？关于如何修复它的任何想法？

Answer 1

您可以通过将目标修改为父窗口(在 iframe 之外)来实现此功能:

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

注意 target设置为 window.parent滚动和计算发生的地方。这将成功启用词缀插件。但是，还有一个问题是 position: fixed在 iframe 中不能很好地播放。我还没有找到克服这个问题的方法。