使用jQuery $（window）.scrollTop（）有一些奇怪的行爲;在移動設備上

Question

我想在滾動到某個點時在頁面的頁眉中淡入淡出。

在移動設備上進行滾動，當某種原因，它不會在特定點褪色英寸會發生什麼，直到完全停止滾動並且沒有淡出動畫時纔會出現。

任何幫助將非常感激。

//Header to appear on scroll 
$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 

    if (scroll >= 150) { 
     $('.header-bar-small').fadeIn(); 
    } else { 
     $('.header-bar-small').fadeOut(); 
    } 
}); 

Answer 1

在深入Dennis（免責聲明：我們一起工作，所以我有查看源代碼的優勢）的問題後，我們發現了一個解決方案。

有報道說，本應該出現在頁面上的三個要素：一個是出現在滾動，而其他人沒有出現，直到滾動已經停止。我們確定scrollTop位置正在更新並且是正確的，並且使元素顯示的JavaScript正確執行。我們甚至刪除了fadeIn（用show代替）以確保它不是延遲渲染問題。

它原來是一個CSS問題。出於某種原因，我們能夠通過將目標div封裝在另一個div中來修復它，只有position:fixed和z-index:1。奇怪的是，我們試圖展示的元素已經具有這些樣式，但無論出於何種原因，添加包裝器都會修復它。

例如：

<div class="showHideWrapper" style="position:fixed; z-index:1;"> 
    <div class="header-bar-small" style="position:fixed; z-index:1;"> 
     This should work. 
    </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     //Header to appear on scroll 
     $(window).scroll(function() { 
      var scroll = $(window).scrollTop(); 

      if (scroll >= 150) { 
       $('.showHideWrapper').fadeIn(); 
      } else { 
       $('.showHideWrapper').fadeOut(); 
      } 
     }); 
    }); 
</script> 

我們試過元素上剝離出來的風格，或將相同的行爲，以一個全新的元素，但它沒有工作，直到我們做了上面。設置position:relative或position:absolute沒有做這項工作，可能是因爲子元素也是固定的。

就目前來說，做這樣的事情可以幫助那些有類似的問題，但如果有人能夠提供什麼原因導致這一個明確的解釋，我所有的耳朵。