iPhone 6 - 位置：固定 - 直到停止滾動才加載

Question

我讀過這個網站上有很多帖子，但沒有什么對我有用，我不知道為什么。

我正在嘗試制作一個菜單，當您滾過它時“粘在”頁面的頂部，反之亦然（當您向上滾動時停止粘貼）

使用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');
      }

CSS

 #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上停止）無論哪種方式，我嘗試過的所有內容都有相同的結果。 在PC或Android上完美運行，但在iPhone上，菜單不會重新繪制並“卡在”頂部，直到滾動停止並且手指從屏幕上移除。

有沒有解決這個問題？ 我正在閱讀的所有內容都表明，但是沒有一個解決方案可以改變我的任何內容。

奇怪的是，如果您向上滾動（菜單已經卡在頂部）並且您滾過它，它會自動取消粘貼（即使在滾動時）並且工作正常。

唯一一次出現問題的時候是“重新粉刷”“固定”菜單。

我希望有一個解決方案。 一切都表明在iOS 8之后它已被修復（我正在測試10+）但它不會在滾動時顯示菜單，直到你停下來放手。 在iPhone 6和iPad Air 2. safari和chrome上進行了測試，全面的結果相同。

Answer 1

我想我解決了這個問題。
這很有趣。
只需添加樣式轉換

transform: scaleX(1);

要么

transform: translateX(0);

這就是全部

.fixedSidebar{
    position: fixed;
    right:0;
    border:1px solid gray;
    height:100vh;
    width:17%;
    max-width:70px;
    transform: scaleX(1);
}

Answer 2

問題在於position:fixed 。 這似乎已經特別針對移動設備上的safari存在問題。 經過幾個小時的搜索后，我相信我可以解決這個問題。

我使用的解決方案是使用position:-webkit-sticky for iOS safari，並使用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');
        }
    }
  });

請注意，我已完全刪除了固定屬性，並將sticky屬性應用於#FloatingMenu選擇器本身。 似乎在我的iOS模擬器Safari，iPhone 6 Safari以及桌面上的Chrome和Safari上為我工作。

可以在此處找到此修復的簡單工作示例 ：鏈接

希望這可以幫助。 干杯。

Answer 3

您不應該為滾動添加任何事件偵聽器，因為它可能會產生多個錯誤 - 可能會導致瀏覽器崩潰。 這是您需要更改的第一件事：

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');
      }

請注意：

如果#FloatingMenu的第一個可滾動父級不是<body> ，則應該修復$('body') 。

iPhone 6 - 位置：固定 - 直到停止滾動才加載

問題描述

3 個解決方案

解決方案1
2 2019-06-14 12:16:58

解決方案2
0 2017-03-30 06:18:57

解決方案3
0 2017-04-03 23:55:23

JS：

JS

請注意：

iPhone 6 - 位置：固定 - 直到停止滾動才加載

問題描述

3 個解決方案

解決方案1 2 2019-06-14 12:16:58

解決方案2 0 2017-03-30 06:18:57

解決方案3 0 2017-04-03 23:55:23

JS：

JS

請注意：

解決方案1
2 2019-06-14 12:16:58

解決方案2
0 2017-03-30 06:18:57

解決方案3
0 2017-04-03 23:55:23