Question

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

我在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文件中的页面而不是三个html文件）：broken navbar

Answer 1

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

您使用data-id="header"的所有三个页面都有multi-page template，因此id

不能使用multiple elements

编辑：http://jsfiddle.net/LvuUX/3/ 看起来jQuery在页面加载时没有使用正确的padding-top。要解决此问题，您只需对padding-top

使用修补程序data-role="content"即可

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

Answer 2

我认为你要做的事情与我遇到的问题类似。我有一个固定的导航栏，但我的页面内容隐藏在它下面。我通过对我的内容div应用一个上边距等于导航栏的高度解决了这个问题。（即我的内容div的上边距为50px，因为那是导航栏的高度。）

Fixed positioned elements将从正常流程中删除。文档和其他元素的行为类似于固定定位元素不存在。

我希望我能正确地解释你的问题。我只学习了3个月的html＆amp; css，但是当我看到你的问题时，我认为这可能有所帮助。

头文件JQuery Mobile中的Navbar

2 个答案: