jQuery mobile css scroll and click

Question

I'm developing a mobile website for smartphones and using jquery mobile. first test: http://pastehtml.com/view/bq51kpbmm.html

I have added the content to the page, so it should be scrollable, but when I'm scrolling the header and footer will be disable for the scroll time. :( second test: http://pastehtml.com/view/bq51nmk7i.html

The jquery mobile documentation (http://jquerymobile.com/test/docs/toolbars/bars-fixed.html) gives me the information that data-position="fixed" should disable hiding my header & footer

what am I doing wrong?

Answer 1

I noticed that you are using jQuery 1.0.1, which is the latest stable version however in 1.1.0-RC1 the jQuery Mobile team has made great strides in fixed headers/footers: http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/bars-fixed.html

I recommend using jQuery Mobile 1.1.0-RC1:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>

Here is a demo using your exact same code but with the above includes instead of the 1.0.1 includes: http://jsfiddle.net/tLNFu/

Answer 2

With jQm this is just what happens when scrolling. Try looking around for some jQm widgets that will compliment the jQm framework. I think iScroll 4 does what you're looking for here.

As for the fixed positioning, from the link that you provided in your original question:

Fixed toolbars

In browsers that support CSS position: fixed, (generally, most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and more), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will fall back to static, inline positiong in the page.

To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element.

Fixed header markup example:

<div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
</div>

Fixed footer markup example:

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>

There is no mention of any facts that say the toolbars won't disappear on scrolling. That's just the behavior in jQm. Plugins can help with this.