web-dev-qa-db-ja.com

iOSで私のposition：stickyが機能しないのはなぜですか？

現在、モバイル画面の下部にある粘着通知バーをコーディングしています。ユーザーがコード内で実際にバーが配置されているスクロール位置（ページのフッターの直前）に到達するまで、バーをユーザー画面の下部に固定しておく必要があります。私はこのページから「医者」の例をほとんどコピーしました： https://alligator.io/css/position-sticky/ 私の問題は：私のページで、バーを使用すると正常に機能します= Androidデバイス、またはデスクトップコンピュータのブラウザの幅を調整してモバイルデバイスをシミュレートする場合。ただし、iOSでは、バーは固定されていません。つまり、バーはその位置に固定されていません。到達するまで画面の下部に表示されます。これはSafariとGoogle Chromeの両方に適用されます。奇妙なことは、前述のalligator.ioページでは、iOSデバイスで正常に動作します。

これは、バーを取り巻くコードに関連するWebkitの問題の1つだと思いますが、それを特定することはできません。 alligator.ioの例にできるだけコードを調整してデバッグを試みましたが、機能しません。私はまた、親要素の任意のoverflow：autoを探してみました-成功しませんでした。私はこれを数時間修正しようとしており、問題にうんざりしており、別の目を使って見落としているものを見つけることができます。

<a href="#" class="jobAlertToggle">
    <div id="jobalarm_mobile">
        <i class="fa fa-bell"></i>
        <span>Jobalarm aktivieren</span>
        <label class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
        </label>
    </div>
</a>

#jobalarm_mobile {
    display: table;
    font-size: 18px;
    width: 100%;
    height: 40px;
    background: #ff8400;
    color: white;
    font-weight: 400;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    bottom: -50px;
    align-self: flex-end;
}

私が取り組んでいるライブページにアクセスできます（お客様のリクエストにより非表示になっています。非公開でご連絡ください）。任意の（推奨）検索を開始すると、バーがポップアップします（iOSを使用している場合はそうではありません...）よろしくお願いします。

ioscsswebkitsticky
14
c42

私の答えはここ のヒントのいくつか、特にdisplay: blockをコンテナに追加すると、うまくいく場合があります。

1
Simon_Weaver

IOSで使用position: -webkit-stickyおよびその他の場合position: sticky

1
Алена Сорока

私にとっては、jQuery/javascript以外はこのように機能しませんでした：固定位置にする必要のある要素を指定します：絶対および左：0、次にjavascriptを使用してウィンドウの左へのオフセットを計算し、そのオフセットを左のプロパティに追加しますあなたの要素：

#stickyElement {
        position: absolute;
        left: 0;
     }

  function scrolling(){
       $('.someElementScrollingLeft').on('scroll', function() {
           let offset = $(this).scrollLeft();
           /* For me it only didn't work on phones, so checking screen size */
           if($( window ).width() <= 768)
           {
              let stickyElement = $('#stickyElement');
              stickyElement.css("left", offset);
            } 
         });
   }
0
Armin
i visit the website may be i found solution for you 
try this its may can help you:

//firstly remove
 //you repeat that in your code

        #jobalarm_mobile {
             display: none !important;       
        }

通知の最後に<a>タグを配置します（<footer>タグの後に）

//write this css
     .jobAlertToggle{
              display: none;
           }
        @media (max-width: 767px)
          .jobAlertToggle{
              display: block;
              width: 100%;
              position:sticky;
              position:-webkit-sticky;
              bottom:-50px;
           }

          #jobalarm_mobile {
               display: table;
               font-size: 18px;
               width: 100%;
               height: 40px;
               background: #ff8400;
               color: white;
               font-weight: 400;
               text-align: center;
               -webkit-align-self: flex-end;
               align-self: flex-end;
           }
0
Hammad tariq