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

目前，做这样的事情可能对那些有类似问题的人有所帮助，但是如果有人能够对导致这种情况的原因提供明确的解释，那我就是全部。

jQuery $（window）.scrollTop（）;有一些奇怪的行为;在手机上

1 个答案: