Question

I have a page that is served up with jQuery mobile. In all of my mobile devices, when I press another link or image or any other javascript enabled element that uses a javascript event (like onclick), the header in my layout disappears. It actually doesn’t really disappear though, it just has it’s position property changed to not be fixed. when I scroll up to the top of my page, my header image is there and it scrolls with the rest of the page. Then when I click another javascript enabled element on the page, it changes the header back to fixed again.

This behavior goes back and forth with any element I click on the page…really weird.

anyone else seen this? Anyone know how to fix it?

here is my layout:

<div data-role="page" id="page1" data-add-back-btn="false">
            <div data-theme="a" data-role="header" data-position="fixed">
                <div style="text-align:left;padding-top:5px;padding-left:3px;">
                    <img src="/images/mylogo.png" alt="Logo" />
                </div>
            </div>
            <div data-role="content">
                @{Html.RenderAction("Items", "Feedback", new {area=""});}
                @RenderBody()
            </div>

        </div>

TIA

Answer 1

Not sure if this solves your problem, but I had the same problem except that it happened no matter where and what I clicked.

I added data-tap-toggle="false" to the fixed element.

Hope it works for you!