页面刷新后如何维持jQuery滚动触发的导航栏变色效果？

嘿，这个问题我之前也碰到过！核心原因很简单：页面刷新后，浏览器会把所有DOM元素的样式重置为初始状态，而你的代码只有在滚动事件触发时才会更新导航栏颜色——刷新后滚动事件没被触发，导航栏自然就回到初始的#2b2b2b啦。

我们只需要调整一下代码逻辑，让页面加载完成后立刻根据当前滚动位置判断并设置导航栏颜色，而不是等滚动事件触发才做这件事。另外，你的原代码里还有个小问题：在$(window).scroll里嵌套了$(document).scroll，这会导致每次滚动都重复绑定新的滚动监听，时间长了会有性能问题，得一起改掉。

下面是修改后的完整代码：

/*jslint browser: true*/ /*global $, jQuery, alert*/
$(document).ready(function() {
    "use strict";
    
    // 把导航栏颜色更新逻辑抽成独立函数
    function updateNavBg() {
        var start_scroll = $(document).scrollTop(),
            start_change = $('#change-it-now');
        
        if (start_change.length) {
            var offset = start_change.offset();
            if (start_scroll > offset.top) {
                $('nav').css('background-color', '#646464');
            } else {
                $('nav').css('background-color', '#2b2b2b');
            }
        }
    }

    // 页面加载完成后立刻执行一次，确保刷新后颜色正确
    updateNavBg();

    // 绑定滚动事件，滚动时更新颜色
    $(window).scroll(updateNavBg);
});

关键修改点说明： #

• 抽离独立函数：把判断滚动位置、设置导航栏颜色的逻辑放到updateNavBg函数里，避免重复写相同代码，也方便复用。
• 页面加载时立即执行：在ready回调里直接调用updateNavBg()，这样刷新页面后，会立刻根据当前的滚动位置设置正确的导航栏颜色，不用等用户滚动。
• 移除事件嵌套：原代码里的滚动事件嵌套会导致重复绑定，现在直接把updateNavBg绑定给$(window).scroll，每次滚动只会触发一次逻辑，性能更优。

这样修改后，不管是刷新页面还是刚打开页面，导航栏都会根据当前的滚动位置显示正确的背景色啦！

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