19

position:fixed を使用して、Web サイトのすべてのページの下部に固定されたバーがあります。問題は、iPhone や iPad などのデバイスでは、このプロパティが考慮されないことです。

画面の高さ、スクロール位置を検出するためにjavascriptを使用しようとしましたが、これはiPadで完全に機能します:

$( window ).scroll( function ( ) { $( "#bar" ).css( "top", ( $( window ).height() + $( document ).scrollTop() - 90 ) +"px" );  } );

ご覧のとおり、jQuery を使用しています。問題は、ウィンドウの高さにロケーション バー (存在する場合はデバッグ バーも含まれる) が含まれていないため、このコードが iPhone で完全に機能しないことです。右の位置 (Mobile Safari のロケーション バーで使用されるピクセル数) の上に固定されます。

この情報を取得して、このツールバーを適切に修正する方法はありますか?

これは iPhone 用に作成された Web サイトではないことに注意してください。そのため、iScroll などのトリックはまったく使用できません。

4

8 に答える 8

5

iOS 8.4 以降、position: sticky;それぞれを使用position: -webkit-sticky;してこれを修正できます。

于 2016-03-31T11:58:11.597 に答える
1

私はあなたをいくつかの方向に向けることしかできません：

于 2011-03-23T18:11:20.340 に答える
1

私は自分のサイトでこれを修正し、Stack Overflow でこれに答えました。それ以来、私はそれを実装した人々からたくさんの感謝を受け取りました. 要約する時間がなくてすみません。

https://stackoverflow.com/a/10030251/1118070

于 2013-04-01T19:03:28.760 に答える
1

ナビゲーションをウィンドウのTOPに貼り付けて、このようなことをしました。ナビゲーションはヘッダーの下から始まり、スクロールするとヘッダーを通過します。iOS5 は固定位置をサポートしています。アイテムはスクロールが終了した後に位置にスナップしますが、それでもうまく機能します。 '#sticky-anchor'私のナビゲーションのラッパーdivです。

これらすべてをどこで見つけたか思い出せません。多くのサイトから小さな断片を入手しました。ニーズに合わせて調整できます。

$(window).scroll(function(event){

// sticky nav css NON mobile way
   sticky_relocate();

   var st = $(this).scrollTop();

// sticky nav iPhone android mobile way
// iOS 4 and below

   if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {
        //do nothing uses sticky_relocate above
   } else if ( navigator.userAgent.match(/(iPod|iPhone|iPad)/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) ) {

        var window_top = $(window).scrollTop();
        var div_top = $('#sticky-anchor').offset().top;

        if (window_top > div_top) {
            $('#sticky').css({'top' : st , 'position' : 'absolute' });
        } else {
            $('#sticky').css({'top' : 'auto' });
        }
    };
};
于 2012-06-12T16:20:29.810 に答える
0

おそらく iScroll は、あなたの問題に対する最も簡単な解決策です。あなたの考えに反して、それはアンドロイドとオペラでも機能します。それの新しいバージョンは素晴らしいパフォーマンスを発揮します。

http://cubiq.org/iscroll-4

于 2012-08-31T21:46:16.557 に答える
0

このjqueryコードのビットは私のために働いた：

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
    $("#footer_menu").css("position", "fixed").css("top", $('window').height());
};

それ以外の場合、#footer_menu の css は次のとおりです。

position:fixed;
bottom:0;
width:100%;
padding:5px 0;
text-align:center;
height:44px;

高さを設定すると、適切にレンダリングされるようになり、デスクトップ ブラウザーでは、このメニューをブラウザー ウィンドウの下部に固定したいと考えました。

于 2013-03-07T20:45:45.957 に答える
-3

私ではなく Google に感謝します:

http://code.google.com/mobile/articles/webapp_fixed_ui.html

実際、かなり単純です。

于 2011-03-29T19:22:23.983 に答える