使用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没有做这项工作，可能是因为子元素也是固定的。

就目前来说，做这样的事情可以帮助那些有类似的问题，但如果有人能够提供什么原因导致这一个明确的解释，我所有的耳朵。