web-dev-qa-db-ja.com

位置を解決する方法：iOS（iPhone / iPad）の下部ツールバーの修正

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

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

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

ご覧のとおり、私はjQueryを使用しています。問題は、ウィンドウの高さにロケーションバー（および存在する場合はデバッグバーも）が含まれていないため、このコードがiPhoneでまったく機能しないため、最初はバーが適切な場所に配置されますが、スクロールすると正しい位置の上に固定（Mobile Safariのロケーションバーで使用されるピクセルの量）。

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

これはiPhone用に作られたWebサイトではないので、iScrollのようなトリックはまったく使用できません。

javascriptiphoneiostoolbarfixed
17
Wes Souza

IOS 8.4以降、position: sticky;それぞれposition: -webkit-sticky;これを修正します。

5
kraftwer1

ナビゲーションをウィンドウの[〜＃〜] top [〜＃〜]に固定して、私はこのようなことをしました。ナビゲーションはヘッダーの下から始まり、スクロールして渡した場合はそのまま残ります。 iOS5は固定配置をサポートしています。アイテムは位置にスナップします[〜＃〜] after [〜＃〜]スクロール終了しますが、引き続きうまく機能します。 '#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' });
        }
    };
};
1
g.simms

私はあなたをいくつかの方向に向けるだけです：

1
Nick Weaver

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

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

1
Ryan Ore

iScroll probaplyは、問題の最も簡単な解決策です。あなたの考えに反して、それはAndroidおよびoperaでも機能します。その新しいバージョンは優れたパフォーマンスを発揮します。

http://cubiq.org/iscroll-4

0
Tosh

Window.innerHeightに基づいて、iPhoneの下部の固定ナビゲーションを非表示/表示してみてください。ツールバーが表示されているときはいつでも、通常は上にスクロールしたときに、下部のナビゲーションを表示し、下にスクロールしたときにツールバーを非表示にできます。

次のようなコードを使用できます。

    var windowHeight = {
  small: window.innerHeight,
  middle: window.innerHeight,
  big: window.innerHeight
}
window.addEventListener('resize', function(){
  var currentHeight = window.innerHeight;
  if (currentHeight < windowHeight.small) {
    windowHeight.small = currentHeight;
  }

  if (currentHeight > windowHeight.big) {
    windowHeight.big = currentHeight;
  }

  console.log('windowHeight.small', windowHeight.small, 'windowHeight.middle', windowHeight.middle, 'windowHeight.big', windowHeight.big, 'currentHeight', currentHeight);

  if (currentHeight === windowHeight.big) {
    transform(stickyNav, 'translate3d(0,120%,0)');
    console.log('Hide bottom nav on big screen!');
  } else if (currentHeight === windowHeight.middle) {
    transform(stickyNav, 'translate3d(0,0,0)');
    console.log('Show bottom nav on middle screen!');
  } else {
    transform(stickyNav, 'translate3d(0,-100%,0)');
    console.log('Display bottom nav high up on smaller screen!');
  }
})

Transform（stickyNav、 'translate3d（x、x、x）'）関数は、下部ナビゲーションを取り、下部に配置されたアイテムを非表示/表示するために変換を適用する単純な関数です。

0
Manuel Cheța

次の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;

高さを設定することで、適切にレンダリングすることができたと思います。デスクトップブラウザでは、このメニューをブラウザウィンドウの下部に固定する必要がありました。

0
budgell