how to fixed the header and footer in iPhone(ios) environment - ios

Question

I need to fix the header when focusing the input and select fields. We are successfully fixed the header in android and windows environment. But in iPhone we are facing the below issue please see in screen shots 2 and 3
We are using jquerymobile 1.4.0
Please any one help me we are trying this issue almost one month still we are not resolved this issue.
screen shot-1
screen shot-2
screen shot-3
(function(){
var targetElem = $('.fixedElement'), // or more than one
$doc = $(document),
offsetY, scrollY, changeY;
if( !targetElem.length || !navigator.userAgent.match(/iPhone|iPad|iPod/i) )
return;
$doc.on('focus.iOSKeyboardFix', 'input, textarea, [contenteditable]', bind);
function bind(){
$(window).on('scroll.iOSKeyboardFix', react);
react();
}
function react(){
offsetY = targetElem.offset().top;
scrollY = $(window).scrollTop();
changeY = offsetY - scrollY;
targetElem.css({'top':'-'+ changeY +'px'});
// Instead of the above, I personally just do:
// targetElem.css('opacity', 0);
$doc.on('blur.iOSKeyboardFix', 'input, textarea, [contenteditable]', unbind)
.on('touchend.iOSKeyboardFix', unbind);
}
function unbind(){
targetElem.removeAttr('style');
document.activeElement.blur();
$(window).off('scroll.iOSKeyboardFix');
$doc.off('touchend.iOSKeyboardFix blur.iOSKeyboardFix');
}
})();
[data-role="page"] {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.ui-header {
position: fixed !important;
top: 0px !important;
right:0px;
left:0px;
text-align: center;
z-index: 1000;
width: 100%;
height: 40px !important;
background: #aa2719 !important;
border: none !important;
padding: 0px !important;
font-weight: normal;
opacity: 1 !important;
}
.ui-footer {
position: fixed !important;
bottom: 0px !important;
right:0px;
left:0px;
text-align: center;
z-index: 1000;
width: 100%;
height: 40px !important;
background: #aa2719 !important;
border: none !important;
padding: 0px !important;
font-weight: normal;
opacity: 1 !important;
}
<div data-role="page" id="page">
<div data-role="content" style="padding: 15px">
<div id="header" data-role="header" data-hide-during-focus="false" data-position="fixed" data-fullscreen="true" data-tap-toggle="false" class="ui-header" style="position:fixed;-webkit-overflow-scrolling: touch;right:20px;bottom:20px;-webkit-backface-visibility: hidden;">
<h3>Header</h3>
</div>
<label for="text">Text Input:</label>
<input type="text" name="text" id="text1">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text2">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text3">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text4">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text5">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text6">
<label for="text">Text Input:</label>
<input type="text" name="text" id="text7">
<select name="select" id="select1">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
<option value="option5">Option5</option>
<option value="option6">Option6</option>
<option value="option7">Option7</option>
<option value="option8">Option8</option>
<option value="option9">Option9</option>
<option value="option11">Option11</option>
<option value="option22">Option22</option>
<option value="option33">Option33</option>
<option value="option44">Option44</option>
</select>
<textarea id="textarea1"></textarea>
<textarea id="textarea2"></textarea>
<textarea id="textarea3"></textarea>
<textarea id="textarea4"></textarea>
Button
<div id="footer" data-role="footer" data-position="fixed" data-hide-during-focus="false" data-fullscreen="true" data-tap-toggle="false" class="ui-footer">
<h3>Footer</h3>
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>