1

画面の下部に固定されているdivにアクションボタンの呼び出しがあるサイトがあります。

現在、絶対に次のように配置されているdivを使用しています

<div id="buttonBar">footer code</div>
<style>#buttonBar{ bottom: 0; width: 100%;  position: fixed; }</style>

これは、メトロ（モダン）モードのIE10を除くすべてのブラウザーでうまく機能しました。

リンクをクリックすると、アドレスバーが表示され、ボタンバーを覆い、リンクが消えます。

ページのレイアウトを再設計する以外に、ボタンバーが表示されたときにアドレスバーのすぐ上に配置したいと思います。

javaScriptを使用してアドレスバーが表示されているかどうかを検出する方法を知っている人はいますか？

4

1 に答える 1

0

ロケーションバーが折りたたまれるまで、ロケーションバーの上にフッターを移動してから、フッターを下にドロップすることができます。考えられる解決策は次のとおりです。

1.ユーザーがIE10タッチ対応ブラウザーを使用している可能性が高い場合は、フッターを50px（またはその他）上に移動します

if (!!window.navigator.msPointerEnabled) { // sniff for IE10 + touch
    $("#buttonBar").css("transform", "translateY(-50px)");
}

2.ブラウザーとの最初の対話を聞いてから、ロケーションバーでフッターを折りたたみます。

$("body").on("MSGestureStart MSInertiaStart MSGestureTap MSPointerDown", function () {
  $("body").off("MSGestureStart MSInertiaStart MSGestureTap MSPointerDown");
  $("#buttonBar").css("transform","translateY(0)");
});

このソリューションは100％信頼できるものではありません。明らかに、ロケーションバーを折りたたむが、イベントをトリガーしないインタラクションがいくつかあります。私はより良い解決策に取り組んでおり、見つかったら更新しますが、ボールを転がすためにこれを共有すると考えました。

于 2013-03-15T17:35:31.833 に答える