fixed header scrolls/drags in jquery mobile

Question

I am working on mobile web app using jquery mobile and phonegap. I developed a hello world app. It has header, footer and contents area. Header and footer are fixed using data-position="fixed" attribute. But the problem with header and footer is, when I scroll down and when the contents a finished and there is not need to scroll anymore then its header drags down(for flexibility or indication and there are not more contents). As in other ios apps, this feature exists but in those apps the header and footer does not drags up and down the contents area only drags. Please see the picture what I mean

As in above picture the header is dragged towards bottom side which I do not want. I want only the content area to have this feature. How can I make it this way so that contents area drags only when there are no more contents available to see?

Any help css, jquery or jquery mobile trick?

Update

HTML code here

<div data-role="page">

        <div data-role="header" id="header" data-position="fixed">
            <h1>Page Title</h1>
        </div><!-- /header -->

        <div data-role="content" id="contents">
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
            <h1>Hello Cirrus.</h1>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
    </div><!-- /page -->

Answer 1

Add this line to your config.xml file if you're using Cordova >=2.6

<preference name="DisallowOverscroll" value="true" />

That option used to be called UIWebViewBounce so if you're using an older version you'll need this line in config.xml:

<preference name="UIWebViewBounce" value="false" />