1

私はIpadでアプリをテストしていますが、私が直面している問題は、フォームを下にスクロールするとトップヘッダーバーが表示fixedされるため、クリックするとスクロールすると下に移動しTextbox、トップヘッダーバーが非表示になり、サイドバーが表示されることですfixed同じようにヘッダーも上がります.SOこの問題の解決策はありますか.多くの記事を見つけましたが、それらのほとんどは将来の見通しに適さない一種のハック記事であるため、これに対する良い解決策は大きな助けになります.

.headbar{
 top:0;
 position:fixed;
 width:100%
}

.siderbar {
  top:50px;
  position:fixed;
  width:200px;
}

}

4

5 に答える 5

2

使ったことがありposition:relativeますか？

使用position:absoluteするには、位置を保持する必要があります。pos 内の絶対 div。相対分割

そうして初めて、位置相対と位置固定が次のように機能します。

    .outerheader_div{
      位置:相対;
    }
    .header_fixed{
      位置:絶対;
    }

    .outersidebar_div{
      位置:相対;
    }
    .sidebar_fixed{
      位置:絶対;
    }
于 2012-12-26T05:10:25.697 に答える
1

それposition:fixedが問題だと思います。モバイルウェブでは風変わりです。代わりにposition:absoluteとを使用してUIを実装できるかどうかを確認してください。z-index

検索：「iOSデバイスでサポートされているposition：fixed」は、実際に使用する必要がある場合、このテーマに関する多くのリソースを提供しますfixed

于 2012-12-20T15:25:56.740 に答える
1

これは、iPadが入力を中心にどのように配置されているかにかかっていると確信しています。

要素が固定されていると、その位置に固定されているため、要素が移動します。lorem ipsum をいくつか入れてみて、ページ全体が動くことがわかるはずです。複製できるかどうかを確認してください。

于 2012-12-20T12:43:22.740 に答える
0

もう少し情報がなければ答えを出すのは難しいです。

ページでJQueryを使用していますか？もしそうなら、あなた data-tap-toggle="false" はヘッダーdivに追加してみることができます。

また、cssでは、left:0;固定要素を指定する必要があります

于 2012-12-19T13:22:25.243 に答える
0

これは iOS6 で動作しますが、残念ながら iOS7 では動作しません: http://jsbin.com/wayurebu/1

コードは固定ヘッダーでは機能しますが、固定フッターでは機能しません。documentElement.className の変更と固定配置要素の表示への切り替えの組み合わせにより、レンダリング エンジンは固定ビューポートを再計算し、すべての固定要素を再配置する必要があります。

500 ミリ秒のタイマーが必要なのは、タッチ スクロール時にスクロール イベントが失敗する場合があるためです。

<style>
#fix1, #fix2 { display: none; position: fixed; top: 0; left: 0; height: 1px; width: 1px; z-index: 2;}
.head1 #fix1, .head2 #fix2 { display: block; }
</style>
<div id=fix1></div>
<div id=fix2></div>
<script>
var toggleTimer;
var headerToggle = 0;
$(window).on('scroll', function() {
    function toggle() {
        var toggleit = !(headerToggle++ % 2);
        $(document.documentElement).toggleClass('head1', toggleit);
        $(document.documentElement).toggleClass('head2', !toggleit);
    }
    toggle();
    clearTimeout(toggleTimer);
    toggleTimer = setTimeout(toggle, 500);
});
</script>
于 2014-06-13T04:19:44.673 に答える