Javascript 标题中的导航栏JQuery Mobile

编辑：我的临时解决方案是关闭所有转换，并为每个标题使用不同的id。然后，您将获得持久工具栏，但没有过渡。

我在JQuery Mobile中的标题中使用了一个持久的固定导航栏。 我在3个html文件之间导航，在第一个（主）页面上没有问题，但在第二个和第三个页面上，导航栏覆盖了一些内容

导航栏和标题的断开导航栏代码示例：

<div data-role="header" data-id="header" data-position="fixed">
        <h1>Page 1</h1>
        <a href="options.html" data-icon="gear" class="ui-btn-right">Options</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" data-icon="home" data-iconpos="top"class="ui-btn-active ui-state-persist"  >Page1</a></li>
                <li><a href="#page2" data-icon="info" data-iconpos="top"  >Page2</a></li>
                <li><a href="#page3" data-icon="gear" data-iconpos="top" >Page3</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->

第1页

我在这里上传了一个问题示例（页面位于一个html文件中，而不是三个html文件中）：

这里是更新的一个：

由于您使用的是

多页模板

，所以对于

多个元素

编辑： 页面加载时，jQuery似乎没有使用正确的

填充顶部。要解决此问题，您只需为您的
data role=“content”


.ui页面标题已修复{填充顶部：5.9em；}
我认为您试图做的与我遇到的问题类似。我有一个固定的导航栏，但我的页面内容被隐藏在它下面。我解决了这个问题，在我的content div上应用了一个与导航栏高度相等的上边距。（也就是说，我的内容分区顶部的边距是50像素，因为这是我导航栏的高度。）

从正常流量中移除。文档和其他元素的行为类似于固定位置元素不存在

我希望我正确地解释了你的问题。我只学了3个月的html和css，但当我看到你的问题时，我认为这可能会有所帮助。
最奇怪的是，当我在我的Opera中单击“Inspect element”时，
跳下并按照你期望的方式运行。多神奇啊：-哦，不，我还没有发现CSS有任何问题……尽管这解决了问题，但最终你会失去持久性工具栏，而这正是我最初尝试的。我不认为多页模板是个问题，在我的应用程序中，我无论如何都不会使用它。在Jquery文档中，他们实际上说必须在头上有相同的id才能使其持久化。
<style type="text/css">
    .ui-page-header-fixed { padding-top: 5.9em; }
</style>