このサイトには私が読んだ記事がたくさんありますが、何も私のために働いていません。iPhone 6 - 位置：固定 - スクロールを停止するまで読み込まない

私は、ページの最上部に「スティック」は、あなたがそれとその逆を過ぎてスクロールすると、そのメニューを作成しようとしている

Javascriptを

$(document).ready(function(){ 
     var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100)) 
     document.addEventListener("scroll",Scroll,false); 
     document.addEventListener("gesturechange",Scroll,false); 
     function Scroll() { 
      var y = $(this).scrollTop(); 
      if (y >= top) { 
       $('#FloatingMenu').addClass('fixed'); 
      } else { 
       $('#FloatingMenu').removeClass('fixed'); 
     }

（あなたが戻ってスクロールアップ時に付着し停止します）

私が再描画やってみたこと

#FloatingMenu.fixed { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 1; 
    width: 100%; 
    background-color: black; 
    color: red; 
    } 
    #FloatingMenu { 
    background-color: red; 
    color: black; 
    width: 100%; 
    text-align: center; 
    }

が、私はどちらかの方法（私はiOSのChromeで停止させることはできません）「慣性」のスクロールを停止しようとしたCSSは、私が試したすべてのものが持っています同じレズlts。 PCやAndroidで完全に動作しますが、iPhone上ではメニューが再描画されず、スクロールが停止して指が画面から削除されるまでトップに「つまらない」状態になります。

修正プログラムはありますか？私が読んでいるすべては、一つの解決策が私のために何かを変えていることを示唆しています。

奇妙なことに、あなたのスクロールバックアップ（メニューはすでに上部に貼り付けられています）を過ぎてスクロールすると、スクロールしてもスムーズにスクロールして正常に機能します。

唯一の問題は、「固定」メニューを「再ペイント」するときです。

解決策があることを願っています。すべてのことは、iOS 8の後は固定されている（と私は10 +でテストしている）ことを示唆していますが、あなたが停止して放すまでスクロールしながらメニューを表示することはありません。 iPhone 6およびiPad Air 2でテストされました。サファリとクロムは、ボード全体で同じ結果を出しました。

出典

2017-02-24 DerekConlon

ヘッダを 'position：fixed'とし、JavaScriptのjQueryを使って' 'にそのヘッダの高さのパディングトップを与えるのはなぜですか？常に正常に見えます。クラスを追加する場合は、ウィンドウ 'scrollTop（）'> 0の場合はそれを基にします。 – Josh

メニューが常にページの上部にあると思われる場合は、何を言っているのでしょうか。私の場合は、あなたがそれを越えてスクロールした後で、それは一番上にあります。 – DerekConlon

これで、ウィンドウのスクロールでヘッダーのスクロールの上部がウィンドウのスクロールの上部よりも小さいかどうかを確認します。クラスの固定とパディングを本文に追加します。 – Josh

問題はposition:fixedです。これは特にモバイルデバイスでのサファリに関する既知の問題があるようです。何時間も何度か検索した後、私はこの問題を解決できたと考えています。

私が使用した解決策は、iOS Safariにはposition:-webkit-stickyを使用し、デスクトップブラウザにはposition:stickyを使用することです。このプロパティの詳細ドキュメントはここで見つけることができます：

http://caniuse.com/#feat=css-sticky

次のコードを試してみてくださいすることができ：

CSS：

#FloatingMenu.fixed { 
    top: 0; 
    left: 0; 
    z-index: 1; 
    width: 100%; 
    background-color: black; 
    color: white; 
    } 
    #FloatingMenu { 
    position: -webkit-sticky; 
    position: sticky; 
    background-color: lightgray; 
    color: black; 
    width: 100%; 
    height: 60px; 
    text-align: center; 
    padding-top: 18px; 
    font-weight: 800; 
    }

JS：

$(document).ready(function(){ 
    var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100)); 
    window.addEventListener('scroll',Scroll,false); 
     function Scroll() { 
     var y = $(this).scrollTop(); 
     if (y > top) { 
      $('#FloatingMenu').addClass('fixed'); 
     } else if (y<=top) { 
      $('#FloatingMenu').removeClass('fixed'); 
     } 
    } 
    });

してください固定プロパティを完全に削除してappセレクタ自体#FloatingMenuにスティッキープロパティを嘘をついた。私のiOSシミュレータのサファリ、iPhone 6 Safari、Chromeの& Safariで私のデスクトップで動作するようです。この修正プログラムの

簡単な作業の例では、ここで見つけることができます：Link

は、この情報がお役に立てば幸いです。乾杯。

出典

2017-03-30 06:18:57

努力してくれてありがとうございます:(。 –

@MaddyこのURLを一度チェックしてみてください：www.inertiamusicproductions.com/testing。私は簡単な実装でそこで働いています。 –

OK、http：//34.198.96.255/これはiphone 6のナビゲーションバーを確認するページです。 –

スクロールするイベントリスナーを追加しないでください。いくつかのエラーが発生する可能性があります。ブラウザがクラッシュする可能性があります。

JS：

$(document).ready(function(){ 
     var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100)); 
     function Scroll() { 
      var y = $(this).scrollTop(); 
      if (y >= top) { 
       $('#FloatingMenu').addClass('fixed'); 
      } else { 
       $('#FloatingMenu').removeClass('fixed'); 
     } 
     setInterval(function() { 
      Scroll(); 
     }, 120); 
});

あなたが修正する必要がある第二のものは、あなたの「機能スクロール」ですこれは、あなたが変更する必要がある最初の事です。それは正しい：ちょうど関数は、DOM要素によって呼び出されるように狂った。しかし、あなたのイベントがDOM要素によってトリガされない場合はどうなりますか？多分それはあなたの問題です！だからでも、イベントリスナーを追加してスクロールすることができます。これを修正するだけですが、私はお勧めしません。

JS

 function Scroll() { 
      var y = $('body').scrollTop(); 
      if (y >= top) { 
       $('#FloatingMenu').addClass('fixed'); 
      } else { 
       $('#FloatingMenu').removeClass('fixed'); 
     }

PAY ATENTION：

の最初のスクロール可能な親#FloatingMenuは<body>されていない場合、あなたはその$('body')を修正する必要があります。

出典

2017-04-03 23:55:23

iPhone 6 - 位置：固定 - スクロールを停止するまで読み込まない

答えて

JS：

JS

PAY ATENTION：

関連する問題