jQuery mobile header disappears (becomes non-fixed) when another javascript action is hit - Stack Overflow

admin管理员组

文章数量:1389833

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

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

• javascript
• jquery-mobile

Share Improve this question Follow edited Jul 29, 2013 at 14:01 Tushar Gupta - curioustushar 57.1k2424 gold badges106106 silver badges109109 bronze badges asked Dec 17, 2012 at 22:44 Christopher JohnsonChristopher Johnson 2,62988 gold badges4040 silver badges7070 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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!

This is amazing. Has helped me in getting this fixed on an application. It was weird that it occurred on binding a class within the list options. When clicking any option in the list, the header and footer became movable and then on another click they became fixed.

Used the attribute data-tap-toggle="false" as suggested by you in the header and the footer and it works like a charm. Thanks.

本文标签： jQuery mobile header disappears (becomes nonfixed) when another javascript action is hitStack Overflow