jQuery实现滚动显示隐藏元素时顶部闪现隐藏问题如何解决

• 你在scrollTop>0分支中设置的300毫秒延迟定时器没有做清除处理，只要你在触发向下滚动后的300毫秒内滚动回页面顶部，这个延迟执行的$('.second').hide()逻辑依然会运行，哪怕此时已经触发了scrollTop=0对应的显示逻辑，最终就会出现元素先显示、随后立刻被隐藏的异常。
• 你设置的元素过渡动画时长和定时器时长一致，进一步提升了这个问题的触发概率。

定义一个变量存储定时器ID，每次触发滚动事件时先清除之前的定时器，避免残留的延迟逻辑执行即可解决问题。

修复后的完整JS代码 #

let scrollTimer = null;
$(window).on('scroll', function() {
    // 每次滚动先清除之前的延迟任务
    clearTimeout(scrollTimer);
    if ($(window).scrollTop() > 0) {
        $('.element').addClass('scroll');
        scrollTimer = setTimeout(function() {
            $('.second').hide();
        },300);
    } else {
        $('.second').show();
        $('.element').removeClass('scroll');
    }
    console.log($(window).scrollTop());
});

内容的提问来源于stack exchange，提问作者user1391152