JQuery Mobile中的Header导航栏

Question

编辑：我的临时解决方案是关闭所有转换并为每个标题使用不同的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 -->

我已经上传了一个问题的示例，这里是链接（一个HTML文件中包含多个页面）：破碎的导航栏。

- oivindth

---

最奇怪的是，当我在Opera中点击“检查元素”时，<ul>跳下来并表现得正如你所期望的那样。这是什么魔法 :-o ，而且，我还没有发现CSS有任何问题... - Imp

Answer 1

这是更新后的代码： http://jsfiddle.net/LvuUX/2/

你在三个页面中都使用了相同的data-id="header"，因为你正在使用多页面模板，所以不能为多个元素使用相同的id

编辑：http://jsfiddle.net/LvuUX/3/ 看起来jQuery在页面加载时没有使用正确的padding-top。要解决此问题，您可以为data-role="content"使用一个修复的padding-top

<style type="text/css">
    .ui-page-header-fixed { padding-top: 5.9em; }
</style>

- Sal

---

虽然这解决了问题，但最终会失去持久的工具栏，而这正是我一开始尝试做的。我认为多页面模板不是问题，在我的应用程序中我也没有使用它。在Jquery文档中，他们实际上说你必须在标题上使用相同的id来使其持久化。 - oivindth

Answer 2

我想你试图解决的问题与我曾经遇到的类似。我有一个固定位置的导航栏，但我的页面内容被隐藏在它下面。我通过将内容div应用与导航栏相同高度的上边距来解决了这个问题。（例如，我的内容div的margin-top为50px，因为我的导航栏高度为50px。） 固定定位元素从正常流中移除。文档和其他元素的行为就像固定定位元素不存在一样。

希望我正确理解了您的问题。虽然我只学习html＆css三个月，但看到您的问题时，我认为这可能会有所帮助。

- Sarah