jQuery-Mobile Disable Page Dragging & prevent Scroll over Header/Footer

Question

The Scrollbars in my Webapp are supposed to only scroll the "content" part. But as soon as I scroll to the end or top of the content the scrollbars scroll the header or footer. Also the page gets dragged which looks really ugly.

Here some pictures:

http://imgur.com/1xNLenx,5EVjBuH,WDo0UAa,Kd3bzy5#0

The header and the footer are fixed in position.

Header:

<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">

Footer:

<div data-role="footer" data-position="fixed" data-tap-toggle="false">

How can I prevent this behavior? Thank you.

Answer 1

Had you tried to also include the all three attributes to your header?

• data-position="fixed"
• data-tap-toggle="false"
• data-update-page-padding ="false"

Here is the code:

<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding ="false"> </div>

Hope this help!

Answer 2

Give an ID to your header. And try to add this script.

JQUERY

$(document).ready(function() {
    $("#my_header").fixedtoolbar({ tapToggle: false });
});

HTML

<div id="my_header" data-role="header" data-theme="b">      
    <h1>Header</h1>        
</div>