滚动切换双Header时返回顶部第二个Header闪烁问题排查

我来帮你搞定这个滚动回顶部时top2闪烁的问题～

问题根源 #

你的代码逻辑本身没问题，但滚动事件会非常频繁地触发，而且没有处理动画队列：当快速滚动时，之前的fade动画还没执行完，新的动画请求又被加入队列，就会导致动画混乱、闪烁的情况。另外两个if没有互斥，虽然不会同时触发，但在滚动过程中可能连续触发不同分支，加重了动画队列的堆积。

修复方案 #

我们需要给动画加上队列清理，同时让条件判断互斥，具体修改如下：

修改后的jQuery代码

$(function () { 
    'use strict'; 
    $(window).scroll(function () { 
        var scrollval = $(window).scrollTop(); 
        
        // 关键：先停止所有相关元素的动画，清除队列并立即完成当前动画
        $("#top, #top2").stop(true, true);
        
        if (scrollval >= 50) { 
            $("#top").fadeOut('slow'); 
            $("#top2").fadeIn('slow'); 
        } else if (scrollval <= 10) { 
            $("#top").fadeIn('slow'); 
            $("#top2").fadeOut('slow'); 
        }
    }); 
});

代码说明

• stop(true, true)：第一个true表示清除该元素的所有待执行动画队列，第二个true表示让当前正在执行的动画立即完成，彻底避免了动画堆积导致的闪烁。
• 改为else if：确保同一时间只会执行一个分支的动画逻辑，避免在滚动边界时出现不必要的判断和动画触发。

你的HTML和CSS代码不需要修改，保持原样即可：

HTML代码

<div id="top">....</div> 
<div id="top2">...</div>

CSS代码

#top { 
    background:red; 
    width:100%; 
    height: 50px; 
} 
#top2 { 
    display: none; 
    position:fixed; 
    top:0; 
    left: 0; 
    background:black; 
    width:100%; 
    height: 50px; 
    margin:0 auto; 
}

现在再测试滚动效果：滚动到50px以上时top平滑淡出、top2淡入；滚动回10px以下时top淡入、top2平滑淡出，不会再出现闪烁的问题啦～

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