4

編集:私の一時的な解決策は、すべてのトランジションをオフにして、ヘッダーごとに異なる ID を使用することです。その後、永続的なツールバーが表示されますが、トランジションはありません。 トランジションなしの作業例

JQuery Mobile のヘッダーで永続的な固定ナビゲーション バーを使用しています。私は 3 つの html ファイル間を移動しています。最初の (メイン) ページでは問題ありませんが、2 ページ目と 3 ページ目ではナビゲーション バーがコンテンツの一部をカバーしています。

navbar とヘッダーの壊れた navbar コードの例:

<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 -->

ここに問題の例をアップロードしました (3 つの html ファイルではなく 1 つの html ファイル内のページ):壊れたナビゲーション バー

4

2 に答える 2

1

これが更新されたものです： http://jsfiddle.net/LvuUX/2/

data-id="header"使用しているため、3つのページすべてで同じであるため、同じものを使用multi-page templateすることはできませんidmultiple elements

編集: http://jsfiddle.net/LvuUX/3/padding-topは、ページの読み込み時に jQuery が正しいものを使用していないようです。この問題を解決する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 のマージントップは、ナビゲーションバーの高さである 50px でした。)

固定配置要素は、通常のフローから削除されます。ドキュメントおよびその他の要素は、固定配置要素が存在しないかのように動作します。

あなたの質問を正しく解釈したことを願っています。私は html&css を 3 か月しか学んでいませんが、あなたの質問を見て、これが役立つかもしれないと思いました。

于 2013-09-10T01:24:36.960 に答える