导航栏滚动变色功能失效，求实现滚动触发样式切换的解决方案

我来帮你搞定这个滚动导航栏变色的问题！先看你贴的代码，首先就有个明显的语法错误——removeClass('scrolled...这里没写完，少了闭合的引号和括号，这会直接导致整个jQuery函数没法正常执行。咱们先把代码修正，再排查其他可能的问题：

第一步：修正jQuery代码的语法错误 #

这是完整的、语法正确的版本：

$(function(){
  $(window).scroll(function() {
    // 当滚动距离超过100px时添加scrolled类，否则移除
    if($(window).scrollTop() >= 100) {
      $('.nav').addClass('scrolled');
    } else {
      $('.nav').removeClass('scrolled');
    }
  });
});

第二步：排查其他可能导致失效的原因 #

• 确认jQuery已正确引入：要确保你在HTML里已经加载了jQuery库，而且得放在你的自定义滚动脚本之前。如果没引入的话，$这个符号是不被浏览器识别的。
• 检查选择器是否准确：.nav这个选择器要和你导航栏元素的class完全匹配，比如你的导航栏是不是<nav class="nav">？如果是嵌套在其他元素里（比如<header class="header"><nav class="nav">），可能需要把选择器改成header .nav来精确匹配。
• CSS优先级问题：有时候就算加上了scrolled类，样式也可能被其他优先级更高的CSS规则覆盖。你可以给scrolled类的样式提优先级，比如：

.nav.scrolled {
  background-color: #你的目标颜色 !important;
  /* 其他样式 */
}

或者检查导航栏有没有内联样式、ID选择器的样式，这些都会比类选择器优先级高。

备选方案：纯JavaScript实现（不用jQuery） #

如果你不想依赖jQuery，也可以用原生JS写，兼容性一样好：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const navElement = document.querySelector('.nav');
  window.addEventListener('scroll', function() {
    // 判断滚动距离
    if(window.scrollY >= 100) {
      navElement.classList.add('scrolled');
    } else {
      navElement.classList.remove('scrolled');
    }
  });
});

测试小技巧 #

修改完代码后，打开浏览器的开发者工具（按F12），切换到Elements标签，滚动页面的时候看看导航栏元素的class列表有没有出现scrolled；再切换到Styles标签，检查scrolled类的样式是否被正确应用（如果划掉了就是被覆盖了）。

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