如何获得一个固定的标题留在页面的顶部？ [英] How does one get a fixed header to stay at the top of the page?
问题描述
固定标题不会停留在页面的顶部。它位于具有通过javascript添加的几个数字输入的页面的顶部。当用户填写这些输入时，标题按预期消失。但是，如果用户点击文本框，标题将在页面中间重新出现。
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.
我已经创建了一个jsfiddle我的页面示例 http://jsfiddle.net/7PZPy/1/ 。它不会显示你的bug，但它应该给你一个好主意的页面是什么。
* /
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. */
这是一个在iPhones和iPad上运行的phonegap应用程序。我使用JQM 1.3.1。
This is a phonegap application running on iPhones and iPads. I am using JQM 1.3.1.
我的研究使我尝试通过CSS尝试使用jquery全页模式和固定位置。我也试过删除一切都不在h1标签内。唉，只要数据位置设置为固定，标题在页面上上下移动。我的html在下面。请帮助。
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>
推荐答案
如果你试图将所有三个属性你的标题？
它适用于我所有这些指定：
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
这里是代码：
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding ="false"> </div>
希望有帮助！
这篇关于如何获得一个固定的标题留在页面的顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
