Fixed Header moves issue in jQuery mobile and PhoneGap

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.