How does one get a fixed header to stay at the top of the page?

问题

The fixed header will not stay at the top of the page for me. It sits on top of a page that has several number inputs that were added via javascript. As the user fills out these inputs the header disappears as expected. However, the header will reapear in the middle of the page if the user taps out of the text boxes. The user has to tap twice to get it to move back to the top of the page.

/Edit Here is another piece of important info. This is happening when I use the next button to move to the next text box as I fill in the information.

I have create a jsfiddle example of my page at http://jsfiddle.net/7PZPy/1/ . It won't show you the bug, but it should give you a good idea of what the page is about. */

This is a phonegap application running on iPhones and iPads. I am using JQM 1.3.1.

My research has caused me to try using the jquery full page mode and a fix position via CSS. I have also tried removing everything that was not inside of the h1 tags. Alas, the header moves up and down the page as long as the data position is set to fixed. My html is below. Please help.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" href="css/jquery.css" />
        <link rel="stylesheet" type="text/css" href="css/ims-theme.css" />


        <script type="text/javascript"  src="js/jquery.js"></script>
        <script type="text/javascript"  src="js/jquery-migrate.js"></script>
        <script type="text/javascript"  src="js/jquerymobile.js"></script>
        <script type="text/javascript" src="cordova-2.6.0.js"></script>
        <script type="text/javascript" src="js/WaitingDialog.js"></script>
        <script type="text/javascript" src="js/UniqueIdentifier.js"></script>
        <script type="text/javascript" src="js/iti.js"></script>
        <title>IMS Field Support</title>
    </head>
    <body>
        <div data-role="page" id="invPage">
            <script type="text/javascript" src="js/inventory.js"></script>
            <div data-role="header" data-position="fixed">
                <h1>Inventory</h1>
                <div id="divAlert" style="display:none">
                    <a href="resolve.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true" class="ui-btn-right" >Alert</a>
                </div>
            </div>
            <div id="inventoryContent" data-role="content">
            </div>
            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="inventory.html" data-icon="grid" class="ui-btn-active ui-state-persist"> Inventory</a></li>
                        <li><a href="technician.html"  data-icon="edit" onclick="cacheInventoryPage();">Technician</a></li>
                        <li><a href="logout.html"  data-icon="delete" onclick="cacheInventoryPage();">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

回答1:

The data-position="fixed" is used to make those smartphone-like headers that disapear with some clicks on body or some other events i dont care,

for what you want, you can just style your header with css with something like:

#myheader{
 position: fixed !important;
 width:100%;
 top: 0px;
}

Works like a charm

PS: The !important overwrites any jquerymobile attempt to change position attribute, it may not be needed

回答2:

Had you tried to also include the all three attributes to your header? It works for me with all these specified:

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!

来源：https://stackoverflow.com/questions/17150959/how-does-one-get-a-fixed-header-to-stay-at-the-top-of-the-page

标签

ios

jquery-mobile

cordova

ios6.1