javascript - 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 包装在另一个仅包含 position:fixed 和 z-index:1 的 div 中来修复此问题。奇怪的是，我们试图显示的元素已经具有这些样式，但无论出于何种原因，添加包装器都可以修复它。

例如:

<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 不起作用，可能是因为子元素也被固定了。

目前，做这样的事情可能会帮助那些遇到类似问题的人，但如果有人能够就导致此问题的原因提供明确的解释，我会洗耳恭听。