How to fix header and footer in iPhone environment (ios)

Question

I need to fix the title when you focus the input and selection fields. We have successfully fixed the title in Android and Windows. But on the iPhone, we ran into a problem below, please see Screenshots 2 and 3

We are using jquerymobile 1.4.0

Please help me, we tried this problem for almost a month, but we did not solve this problem.

Screenshot-1

screen shot-2

Screenshot-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> <a href="#" data-role="button" id="button1">Button</a> <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>