4

编辑：我的临时解决方案是关闭所有转换并为每个标题使用不同的 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 文件中，而不是三个 html 文件中）：损坏的导航栏

4

2 回答 2

1

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

你在data-id="header"所有三个页面上都有相同的，因为你正在使用multi-page template，所以你不能有相同id的multiple elements

编辑： http: //jsfiddle.net/LvuUX/3/ 看起来 jQuerypadding-top在页面加载时使用不正确。要解决此问题，您只需padding-top为您的data-role="content"

<style type="text/css">
    .ui-page-header-fixed { padding-top: 5.9em; }
</style>
于 2012-05-08T03:37:34.937 回答
1

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

固定定位元素从正常流程中移除。文档和其他元素的行为就像固定定位元素不存在一样。

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

于 2013-09-10T01:24:36.960 回答