How to fix header using jQueryMobile

Question

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

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

In this div, I set data-position = "fixed". The title is fixed, but after scrolling the page, my title is hidden, and after scrolling, my title is again visible.

Answer 1

JQueryMobile since version 1.1-rc1 introduced the correct fixed support for headers.

To fix the headers, be sure to add the following attribute

 data-position="fixed" 

If you want to disable tap-to-toggle, add the following

 data-tap-toggle="false" 

An example of your pastebin is 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 make sure that you are using 1.1-rc1 with jQuery 1.7.1