使用JS实现sticky吸顶导航栏时如何切换列表项文字为白色

现有实现的核心逻辑与现存问题 #

• 导航初始状态：纯白色背景，内部导航列表项使用默认黑色文字
• 滚动触发机制：JS监听页面滚动距离，当滚动值达到导航栏的初始顶部偏移量时，直接为导航根元素添加sticky类名
• 现有sticky类的样式定义：仅实现了固定定位、深紫色背景的视觉效果，未覆盖内部导航链接的默认文字颜色规则
• 现存问题：吸顶状态下深紫色背景与黑色文字对比度极低，可读性极差，多次调整样式始终无法实现吸顶时文字变白的预期效果

可直接落地的调整方案 #

1. 新增与sticky类绑定的文字颜色样式规则
   核心是将文字颜色的样式作用域限定在吸顶状态的导航容器内，保证样式优先级足以覆盖默认的黑色文字规则，参考CSS写法：

   /* 匹配吸顶状态下导航内部的列表链接 */
   .your-nav-root.sticky .nav-list-item a {
     color: #ffffff;
   }
   

   注意不要写过于泛化的选择器（比如单独写.sticky a），避免误改页面其他位置的链接颜色，明确指定导航容器下的目标链接选择器即可。
2. 常见样式失效的排查方向
   • 检查选择器优先级：如果默认的黑色文字样式使用了更高权重的选择器（比如带ID选择器的#headerNav .nav-link { color: #000 }），对应吸顶状态的样式也要匹配同等或更高的权重，比如写成#headerNav.sticky .nav-link { color: #fff }，否则会被高优先级的默认规则覆盖
   • 检查类名挂载位置：确认sticky类是直接添加在导航根元素上，而非它的父级或子元素，否则CSS选择器无法匹配到目标元素
3. 体验优化补充
   可以给导航本身的背景、文字颜色都加上统一的过渡动画，避免滚动到阈值时样式生硬跳变：

   .your-nav-root {
     transition: background-color 0.3s ease, color 0.3s ease;
   }
   

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