Bootstrap Affix not working inside iframe

Question

I have a page that is inside an iframe. This page is a Twitter Bootstrap 3 navigation template with Affix. When the page loads directly (outside the iframe), nav and Affix work fine, but inside iframe nav and Affix do nothing - the extension of the child navigators is missing and it scrolls.

Here is a snippet of my code for 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>

Note. I am using CSS from the Bootstrap documentation site for the nav / Affix layout.

Should they work inside an iframe? Any ideas on how I can fix this?

Answer 1

You can make this work by changing the target to the parent window (outside the iframe):

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

, target window.parent, . . , position: fixed iframe. .