页面刷新后导航栏背景色未随滚动位置更新，求修复方案

问题根源 #

你的代码只在窗口滚动事件触发时才会检测滚动距离并切换导航栏样式。页面刷新后，滚动事件没被触发，判断逻辑根本没执行——哪怕此时滚动位置已经超过200px，导航栏也只会停留在初始样式，必须等你再次滚动才会触发样式切换。

修复方案 #

把判断滚动位置的逻辑抽成独立函数，页面加载完成后先主动执行一次，同时把这个函数绑定到scroll事件上。这样刷新页面时会直接检查当前滚动位置并应用正确样式，滚动时也能正常响应。

修改后的index.js代码：

$(function () {
    // 抽成独立函数
    function updateNavBg() {
        var scroll = $(window).scrollTop();
        if(scroll > 200){
            $("nav").addClass("nav_bg");
        }else{
            $("nav").removeClass("nav_bg");
        }
    }

    // 页面加载时先执行一次
    updateNavBg();
    // 绑定到滚动事件
    $(window).scroll(updateNavBg);
});

这样不管是刷新页面还是滚动操作，导航栏都会根据当前滚动位置自动切换样式，问题就解决了。

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