title: Jquery Mobile - Navbar not fixed after scroll in an iframe
body: <p>I have successfully implemented a fixed navbar on all the pages of my application except on one of the page.
  This page contains an iframe that has a 100% height and 100% width.</p>
  
  <p>When I load the page, everything is normal.</p>
  
  <p><img src="https://i.stack.imgur.com/SFSYr.png" alt="What is should be always like"></p>
  
  <p>If I scroll everything is still normal. </p>
  
  <p>But next, I click on link inside the iframe</p>
  
  <p>And then I scroll, the navbar and headerbar are not fixed anymore during the scroll. And then they go back to their position.
  <img src="https://i.stack.imgur.com/9m2KH.png" alt="enter image description here"></p>
  
  <p>Here is some code to help you out</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;My Page&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
      &lt;link rel="stylesheet" href="css/jqm-icon-pack-2.1.2-fa.css" /&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div data-role="page" id="boutique"&gt;
      &lt;div data-role="header" data-position="fixed" data--tap-toggle="true"&gt;
          &lt;h1&gt;Boutique&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content" style="padding:0px"&gt;
          &lt;iframe  style="width:100%; height:100%; border:0px; margin:0px" src="http://autotech.gazoline.net/index.php?mobile_theme_ok" rel="external"&gt;
          &lt;/iframe&gt;
      &lt;/div&gt;
      &lt;div data-role="footer" data-id="myfooter" data-transition="pop" data-position="fixed" data-tap-toggle="true"&gt;
      &lt;div data-role="navbar" data-grid="b"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#articles" data-icon="file"&gt;Articles&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#videos" data-icon="play"&gt;Vid&amp;eacute;os&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="ui-btn-active ui-state-persist" href="#boutique" data-icon="shopping-cart"&gt;Boutique2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>