Add this attribute to your header/footer div:

        <div data-role="header" data-position="fixed">
            <h1>Header Page 1</h1>
        </div>

Also, you might have a look at this: http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

The issue I had with jquery mobile fixed is that the header and footer fade. I imagine this is something that they will correct in the future but in addition to iscroll suggested by Dan, there is also jquery mobile scrollview and wink toolkit. I had good results with jquery mobile scrollview but no luck with iscroll or wink

1) Jquery mobile Scrollview

• Demo: http://jquerymobile.com/test/experiments/scrollview/
• Code: https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview/

2) Wink Toolkit

• Tutorial: http://www.winktoolkit.org/tutorials/119/
• Demo: http://www.winktoolkit.org/documentation/wink/ui/layout/scroller/test/test_scroller4.html?theme=default

Another option is check out iScroll: http://cubiq.org/iscroll