JQuery-mobile, Phonegap, iOS, fixed header jumps after leaving input form

Question

I am using Phonegap with JQuery-mobile, Phonegap on iOS. I encounter this problem with header jump to the middle when leaving form input.

I already set data-hide-during-focus="true" on both fixed header and footer. This problem is killing me.

Answer 1

If we have only one header bar then we can follow the code only for the main-headerbar.

    $(document).on('focus', 'select, input, textarea', function () {
        $('#main-headerbar').css({'position': 'absolute', 'top': '0px' });
    });
    $(document).on('blur', 'select, input, textarea', function () {
        $('#main-headerbar').css({ 'position': 'fixed' });
    });

If we have two header bars and Second-headerbar will be shown underneath the Main-headerbar (If main-headerbar’s height is ’47px’ then set top style for the second-headerbar, top : 47px).

$(document).on('focus', 'select, input, textarea', function () {
    $('#main-headerbar').css({'position': 'absolute', 'top': '0px' });
    $('#Second-headerbar').css({ 'position': 'absolute', 'top' : '0px' });
});
$(document).on('blur', 'select, input, textarea', function () {
    $('#main-headerbar').css({ 'position': 'fixed' });
    $('#Second-headerbar').css({ 'position': 'fixed', 'top': '47px' });
});

OR follow iOS fix for position fixed elements on input