Я работаю над мобильным веб-приложением, используя jquery mobile и phonegap. Я разработал приложение Hello World. Он имеет верхний и нижний колонтитулы и область содержимого. Верхний и нижний колонтитулы фиксируются с помощьюdata-position="fixed" приписывать. Но проблема с верхним и нижним колонтитулом заключается в том, что когда я прокручиваю вниз и когда содержимое закончено, и больше нет необходимости прокручивать его, его заголовок перетаскивается вниз (для большей гибкости или индикации, а содержимого больше нет). Как и в других приложениях ios, эта функция существует, но в этих приложениях верхний и нижний колонтитулы не перетаскивают, а область содержимого только перетаскивает. Пожалуйста, посмотрите на картинку, что я имею в виду

Как на картинке выше, заголовок перетаскивается к нижней части, что мне не нужно. Я хочу, чтобы только область контента имела эту функцию. Как сделать так, чтобы область содержимого перетаскивалась только тогда, когда больше нет содержимого, доступного для просмотра?

Любая помощь CSS, JQuery или JQuery мобильных трюк?

Обновить

HTML-код здесь

<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 -->