jQuery $(window).scrollTop(); 有一些奇怪的行为；在手机上

Question

我试图在滚动到某个点时淡入页面的 header。

在移动设备上滚动时出于某种原因，它不会在特定点淡入。发生的情况是，直到您完全停止滚动并且没有淡入淡出动画时它才会出现。

如有任何帮助，我们将不胜感激。

//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 没有完成这项工作，可能是因为子元素也被修复了。

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

jQuery $(window).scrollTop(); 有一些奇怪的行为；在手机上

Having some weird behaviour with jQuery $(window).scrollTop(); on mobiles

javascript

mobile

jquery

scrolltop