如何为固定导航栏脚本添加页面加载触发的激活逻辑？

嘿，我完全懂你的困扰——刷新页面后，明明已经不在顶部了，但导航栏非得等你滚动一下才会切换到激活状态，这确实有点别扭。其实解决方法很简单，我们只需要把滚动时执行的判断逻辑抽出来，让它在页面加载完成时也自动跑一遍就行，这样就能直接根据页面初始位置来激活导航栏，而且完全不会出现“始终激活”的问题。

核心思路 #

原来的脚本只有在滚动事件触发时才会检查滚动距离并更新导航栏状态，但页面加载时不会主动做这件事。我们可以把判断逻辑封装成一个独立函数，这样既可以在滚动时调用，也能在页面加载完成时立即执行，完美解决刷新后的状态问题。

修改后的代码 #

// 把导航栏状态更新的逻辑封装成函数
function updateNavigationState() {
  const scrollDistance = $(window).scrollTop();
  
  // 当滚动距离大于0时添加scroll类，否则移除
  if (scrollDistance > 0) {
    $("#top, .nav li a, .logo, .menu").addClass("scroll");
  } else {
    $("#top, .nav li a, .logo, .menu").removeClass("scroll");
  }
}

// 页面DOM加载完成后，立即执行一次状态检查
$(document).ready(function() {
  updateNavigationState();
});

// 滚动时仍然执行状态更新
$(window).scroll(function() {
  updateNavigationState();
});

代码说明 #

1. 封装函数：把原来写在scroll事件里的判断代码放进updateNavigationState函数，让代码更整洁，也方便重复调用。
2. 页面加载时执行：$(document).ready()会在页面所有DOM元素加载完成后立即调用这个函数，此时会自动检查当前页面的滚动位置——如果已经不在顶部（scrollTop > 0），就直接给元素加上scroll类，激活导航栏样式。
3. 保留滚动逻辑：滚动事件里还是调用同一个函数，保持原来滚动时实时更新状态的功能。

另外我还优化了一下代码，把多个选择器合并成了一个，让代码更简洁，功能完全和原来一致哦。

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