Back to Top

Fixed Header moves issue in jQuery mobile and PhoneGap

Solution: Header moves using jQuery mobile and Phonegap in Android

Here is the quick article to share the solution I found for fixed header issue using PhoneGap and jQuery mobile in Android/iOS application.

I have used jQuery mobile for an android PhoneGap application. I have created a header which position is fixed means sticks to the top of the device’s screen.

It has data-position=”fixed” so It will display every time even you have to scroll a page. Now let’s see the problem I have faced with this.

I have one image after the header and when I tap on that image and click on the screen the headers slightly jumps up and then reset to the position.

So, I got a solution of this problem by using one attribute of jQuery mobile and to do this, I have used jQuery mobile attribute data-tap-toggle.

So, Let’s see the code:

Here I have added tag into a header to keep it fixed on the top of the screen. Tap toggle will keep the header even if you scroll/tap on the body.

Other posts,You may like:

Display Text Format Proper in IPHONE+ANDROID
How to call Multiple Change Page in Single HTML
SQLite statements used in Android/iOS using PhoneGap

As always, thanks for reading. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Comments (5)

  1. I tried it but it didn’t work.

    1. Are you using jquery mobile and phonegap for development?

  2. Excellent Bhumi…
    This has absolutely worked for me.
    Now my headers and footers don’t flick or blink around when tapping anywhere on the page.
    Thanks a tonn 🙂

  3. Hello Bhumi,

    I am having this issue in case of footer.
    Your solution did not solved it.


    1. What issue you have for the footer? This solution is for the header. Can you elaborate issue?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

PhoneGap Tutorial for Beginners

Posted on 6 years ago


How to use HTML5 Page Visibility API

Posted on 3 years ago


Hello world

Updated 1 month ago

Nick Carter

In depth Understanding of Laravel Core

Updated 3 months ago


ECMAScript 6 New Features – 2

Updated 1 year ago


The Reader’s Poll – June 2015

Posted on 4 years ago


The Reader’s Poll – August 2014

Posted on 5 years ago


The Reader’s Poll – June 2014

Posted on 5 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago


The Readers’ Poll – August 2013

Posted on 6 years ago