スクロール後の一番上のdiv固定 - iOSモバイルデバイス上の問題

Question

私は次の例に示す効果を取得したい：https://css-tricks.com/scroll-fix-content/

を基本的に私は、ページがにスクロールされた後、上のdivを修正したいです一定量。 divには最初にposition：relativeが与えられ、ウィンドウを一定量スクロールした後、divは一番上に固定され、position：fixedのようなプロパティを持ちます。

これはウェブ上でうまく動作しますが、IOSデバイスではデバイスはスクロールが完了した後にのみ上に固定されます。

可能な解決策はありますか？スクロールが完了した後ではなくdivがスクロールの固定プロパティを取得するようにします。

Answer 1

これは、通常、iOS（トップから最初のスクロール後）であっても機能します。ここにデモンストレーション用のJSFiddleがあります：

OPが望んでいるものを正確に解決する方法はありません。これはAppleがどのようにposition: fixedを利用しているかのバグです。私のソリューションは、iOS投稿の「最初の」スクロールの上部から動作し、他のすべての非Appleデバイス（アンドロイドなど）で動作します。開発者は、Appleだけでなく、大衆のために開発する必要があります。これは私のソリューションが正しい方向への良いアプローチである理由でもあります。残念ながら、Appleの問題をiOSの初期スクロールで解決することはできません。

残念なことにAppleのみがこの問題を解決できます。

私が設定したのはかなり簡単なことでした。200pxを超えるページの上部から離れたクラスを追加しました。私が追加したクラスはmadestickyです。 CSSでは、このクラスをposition: relative;からposition: fixed;に切り替えることができます。

私は、この提案が、あなたに適したものを見つけようと努力しているか、正しい方向に向いているかどうかを願っています。

CSS：

.stickynav { 
    position: relative; 
    width: 100%; 
    background-color: #000; 
    } 
    .stickynav.madesticky { 
     position: fixed; 
     top: 0; 
     left: 0; 
     z-index: 5; 
     } 

    .stickynav *::before, 
    .stickynav *::after, 
    .stickynav * { 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing:   border-box; 
     } 

    .stickynav_inner { 
     margin: 0 auto; 
     width: 100%; 
     max-width: 1000px; 
     } 

    .navlist { margin: 0; padding: 0; } 
     .navlist ul { list-style-type: none; } 
      .navlist li { display: block; float: left; } 
       .navlist a { 
        padding: 10px 15px; 
        display: block; 
        color: #fff; 
        text-decoration: none; 
        } 
        .navlist a:hover { 
         background-color: #454545; 
         } 

HTML：

<div style="height: 200px;"></div> 

<div class="stickynav"> 
    <div class="stickynav_inner"> 
     <ul class="navlist"> 
      <li><a href="#">Nav Item 1</a></li> 
      <li><a href="#">Nav Item 2</a></li> 
      <li><a href="#">Nav Item 3</a></li> 
     </ul> 
     <div style="clear: both;"></div> 
    </div> 
</div> 

<div style="height: 2000px;"></div> 

はJQuery：

/** 
* Header Scroll with Add/Remove Class Function 
*/ 
function headerScrollResize(){ 

    var scroll = $(window).scrollTop(); 

    if (scroll < 200) { 
     $(".stickynav").removeClass("madesticky"); 
    } 

    if (scroll >= 200) { 
     $(".stickynav").addClass("madesticky"); 
    } 

} 
$(window).on('load scroll', function(){ 
    headerScrollResize(); 
});