滚动时同步修改Navbar文本颜色、修复hover并添加底部阴影求助

我希望实现页面滚动时，Navbar的文本颜色随背景色同步变化，同时在Navbar滚动下移时显示底部阴影。我尝试了以下jQuery代码：

$(document).ready(function(){
  $(window).scroll(function(){
      var scroll = $(window).scrollTop();
      if (scroll > 300) {
        $(".navbar-custom").css("background" , "white");
$(".navbar-custom").css("color" , "blue");
      }
      else{
        $(".navbar-custom").css("background" , "rgba(255, 255, 255, 0.37)");
$(".navbar-custom").css("color" , "white");
      }
  })
})

但仅能改变Navbar背景色，文本颜色不生效，且滚动后Navbar的hover功能被破坏。

1. 直接给.navbar-custom设置color属性，优先级低于针对内部文本元素（如.nav-link）的原有CSS规则，导致文本颜色不生效。
2. jQuery直接修改行内样式会覆盖原有CSS的hover规则，破坏hover交互效果。

推荐通过添加/移除CSS类的方式实现，避免行内样式冲突，同时保留原有hover功能：

步骤1：定义状态类CSS #

/* 默认状态 */
.navbar-custom {
  background: rgba(255, 255, 255, 0.37);
  transition: all 0.3s ease; /* 添加过渡动画提升流畅度 */
}
.navbar-custom .nav-link {
  color: white;
}
.navbar-custom .nav-link:hover {
  color: #ccc; /* 保留原有hover样式 */
}

/* 滚动激活状态 */
.navbar-custom.scrolled {
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 底部阴影效果 */
}
.navbar-custom.scrolled .nav-link {
  color: blue;
}
.navbar-custom.scrolled .nav-link:hover {
  color: darkblue; /* 滚动后的hover样式 */
}

步骤2：修改jQuery代码切换类 #

$(document).ready(function(){
  $(window).scroll(function(){
      var scroll = $(window).scrollTop();
      $(".navbar-custom").toggleClass("scrolled", scroll > 300);
  })
})

• 用类切换替代直接修改行内样式，所有样式由CSS统一控制，避免优先级冲突，hover效果完整保留。
• transition属性让背景、颜色的变化更平滑，优化视觉体验。
• 针对.nav-link单独设置颜色，确保文本样式准确生效。

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