Stop header footer from loosing position:fixed with click - Jquery Mobile

Question

I'm using jquery mobile in a Cordova -3 application. A simple page with header and footer having data-position:fixed attribute.

<div data-role="page" id="myPage1">
    <div data-role="header" data-position="fixed">
        <h1>Page 1 header</h1>
    </div>


     <h1>Page 1</h1>
     <h1>Page 1</h1>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div data-role="footer" data-position="fixed">

        <h1>Page 1 Footer</h1>
    </div>
</div>

It works fine. But when I'm clicking any blank part of body the header footer goes away off the screen. I think it looses data-position:fixed attribute. Again at that time if I click again in any blank place header footer comes back as fixed. Strange behavior. I want the header footer to be fixed no matter where I touch in screen.

You can see the problem in this JSFiddle Click in any part of the body and scroll. You will see it isn't fixed anymore with respect to screen.

Please help......

Answer 1

You have to set data-tap-toggle to false like this:

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <h1>Page 1 Footer</h1>
</div>