Question

I am new to jQueryMobile. I have one problem regarding fixed headers. I have this code in my header div:

<div  data-role="header" hieght="100px" data-position="fixed" data-theme="a"  style="min-height: 45px;">
    <h1>Nieuwspoort</h1>
</div>

In this div I have put data-position=”fixed”. The header is fixed but after I scroll the page my header is hidden and after I am done scrolling my header becomes visible again.

Answer 1

Proper fixed header support has been introduced into jQueryMobile from version 1.1-rc1 onwards.

To fix your headers make sure to add the following attribute

data-position="fixed"

If you would like to disable tap-to-toggle then add the following

data-tap-toggle="false"

Your pastebin example modified to work:

<div  data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="a"  style="min-height: 45px;">
  <h1>Nieuwspoort</h1>
</div> 

You need to ensure you are using 1.1-rc1 with jQuery 1.7.1