Header is not fixed when textfield onfocus event fired in jquery

Header is not fixed when textfield onfocus event fired in jquery

Header is moving up/down when textfield onfocus event fired in jquery even
if i used data-position="fixed" for header. Can anyone help how to fix the
header when onfocus and onblur is calling?
Here is the html code. When i select 'Enter Category Name' in a popup then
keypad comes up and header is moving down.
<div data-role="page" id="page1" style="background: rgb(25,7,7);
position:absolute;left:0px;height:100%;width:320px;background-repeat:no-repeat">
<div data-role="header" id="page1Header" data-tap-toggle="false"
data-position="fixed"
style="height:46px;background:rgb(25,7,7);top:-1px">
<img src="Images/add_btn@2x.png" id="addCategory" class="muncul"
style="position:fixed;height:25px;width:25px;right:10px;top:7px;"/>
</div>
<div data-role="content" >
<ul data-role="listview" id="listTable" class="mainList"
style="border:none;margin-top:-15px"></ul>
</div>
<div id="target" data-position="fixed" data-scroll="false"
style="background: url(Images/popup_bg.png) no-repeat;background-size:
167px 91px;margin-left:5px">
<input type="text" id="adddescriptionName" placeholder="Enter
Category Name"
style="background:rgba(218,218,218,1);height:32px;width:153px;margin-top:15px;border-radius:
3px;" />
<img id="addSaveButton" src="Images/save_btn@2x.png"
style="width:154px;background-size: 154px 29px;margin-top:1px;"
/>
</div>
</div>