0

モバイル Web アプリケーションのナビゲーション バーを固定したままにしてほしいというリクエストがありました。これは非常に単純なはずですが、position:fixed を設定するとすぐに、それをラップする div が完全に壊れてしまいました。

まず、他のすべての要素が押し上げられて重なります。私が得て、一緒に働くことができます。大きな問題は、スクロールがまったく機能しないことです。マウスのスクロールボタンをクリックして「ドラッグスクロール」を取得できますが、ホイールを回転させても最新のクロム、ie10、サファリでは何もしません。これはモバイルアプリであるため、マウスを使用する可能性はほとんどありませんが、デバイスでのスクロールが非常に不安定になります. iOSおよびAndroidでテスト済み

興味深いことに、中ボタンのクリックをマウスの左クリックとして解釈します。

変換がある場合、固定が機能しないという質問が見つかりました。これにより、実際には絶対ではなく固定として機能する修正が行われましたが、それでも上記の問題が発生します。

CSS

#header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  text-align:center;
  height: 40px;
  background: black;
}

HTML

<div id="header">
  <table class="head">
    <tr>
      <td class="hleft" id="logout" onclick="javascript: window.history.back();"></td>
      <td class="comm">Community</td>
      <td><asp:TextBox ID="searchbox" CssClass="k-textbox searchSmall" runat="server" OnTextChanged="searchbox_TextChanged"></asp:TextBox></td>
    </tr>
  </table>
</div>

編集：中央のテキストを適切に切り捨てて適切な長さにするのに問題があり、続けて次のセルの下にいて、まだこれを行っているため、テーブルのみを使用しています。テーブルは必須ではなく、実際には標準のスタイルのリスト メニューを使用することを好みますが、それを試してみましたが、動作させることができませんでした。

4

3 に答える 3

1

残りのコードは投稿していませんが、私には問題ないようです。例を次に示します: http://jsfiddle.net/t3uxS/

ページ コンテンツの残りの部分と一緒に、固定トップ バーをラッパー内に保持していましたか?

編集

スクロールを表示するには、さらにコンテンツ (何とか何とか) を追加します (<div class="content">必要な場合)。

次のようにのみ動作します。

<div id="header">
</div>
<div class="content">
</div>
于 2013-10-18T16:15:24.000 に答える
0

あなたのコードは私には正しいように見えます.cssに#を追加するのを忘れたようです.header{}の代わりに#header{}になります.これはheaderタグではなくdiv IDであるためです.

于 2013-10-18T16:20:27.570 に答える
0

この問題は、サイトの他のタグに関連している可能性があります。見出しの位置を固定に設定すると、そのセクションが通常のページ フローから引き出され、他のタグ セクションがその下と周囲のスペースを埋めます。残りのコードと CSS を確認できますか?

于 2014-03-14T14:11:32.757 に答える