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

滚动到特定点时，我试图淡入页面标题。

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

任何帮助将不胜感激。

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

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

最佳答案

在深入研究了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不能完成任务，可能是因为子元素也已修复。

目前，执行类似的操作可能会帮助那些遇到类似问题的人，但是如果任何人都能够对导致此问题的原因做出明确的解释，我将不胜感激。

关于javascript - jQuery $(window).scrollTop()有一些奇怪的行为；在手机上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39877765/