本網站上有很多帖子，我已閱讀，但沒有爲我工作，我不知道爲什麼。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'); 
     }

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）不管怎樣，一切我已經試過有相同的結果LTS。在PC上或Android上完美工作，但在iPhone上，菜單不會重新繪製並在頂部「卡住」，直到滾動停止並且手指從屏幕上移除。

有沒有解決這個問題？我正在閱讀的所有內容都表明，只有一種解決方案對我而言有任何改變。

奇怪的是，如果您的滾動備份（菜單已停留在頂部）並且您滾動過去，它會自動解除粘連（即使在滾動時）並且工作正常。

問題出現在「重新繪製」「固定」菜單的唯一時間。

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

來源

2017-02-24 DerekConlon

爲什麼不只給頭'position：fixed'，然後給''使用JavaScript jQuery填充頁眉高度的頂部。它總是看起來很正常。如果你想添加一個類到它，如果窗口'scrollTop（）'> 0基於它。 – Josh

如果菜單總是應該在頁面的頂部，你所說的會起作用。在我的情況下，它不是，只是在你滾過去之後纔在頂端。 – DerekConlon

ok在窗口上滾動檢查，看看頁眉滾動頂部是否小於窗口滾動頂部，如果是的話，添加類固定和填充身體，如果不是從身體刪除類和填充。 – Josh

問題出在position:fixed。這似乎已經知道Safari移動設備上的問題。經過幾個小時的搜索後，我相信我可能已經能夠解決這個問題。

我使用的解決方案是在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'); 
     } 
    } 
    });

請請注意，我已經徹底刪除了固定的屬性和應用程序將粘性物品騙到#FloatingMenu選擇器本身。似乎在我的iOS模擬器Safari和iPhone 6 Safari以及我的桌面上的Chrome & Safari上爲我工作。

此修復程序的簡單的工作例子可以在這裏找到：Link

希望這有助於。乾杯。

來源

2017-03-30 06:18:57

感謝您的努力，但不工作:(。 –

@Maddy你可以檢查一下這個URL，看看：www.inertiamusicproductions.com/testing。我有它在那裏工作，只需一個簡單的實現。所以我可以幫助調試以及？ –

好吧，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：

相關問題