4

I have a page that is inside an iframe. This page is a Twitter Bootstrap 3 template with an nav with Affix. When the page is loaded directly (outside of an iframe) the nav and Affix works fine but inside the iframe the nav and Affix does nothing - there is no expanding of child navs and it scrolls away.

Here is the snippet of my code for the 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 the CSS from the Bootstrap docs website for the nav/Affix layout.

Should these work inside an iframe? Any ideas on how I can fix it?

johna
  • 10,540
  • 14
  • 47
  • 72

1 Answers1

0

You can get this working by modifying the target to the parent window (outside the iframe):

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

Note the target is set to window.parent where the scrolling and calculations take place. This will enable the affix plugin successfully. However, there is the remaining issue that position: fixed does not play nicely in iframes. I haven't found a way to overcome this yet.

Samuel Georges
  • 973
  • 4
  • 7