如何实现Navbar随scrollY与hover状态动态切换样式？

需求说明 #

• 当页面滚动距离scrollY > 0（Navbar不在顶部）：
  • Navbar背景色设为#fff
  • 子元素（a、i、p标签及.navbar-products）文字颜色设为#000
  • 子元素hover时文字颜色变为#ff7bac
• 当页面滚动距离scrollY <= 0（Navbar在顶部）：
  • Navbar背景色设为rgba(0, 0, 0, 0.2)
  • 子元素文字颜色设为#fff
  • Navbar hover时，背景色切换为#fff，子元素文字颜色变为#000
  • 子元素hover时文字颜色仍为#ff7bac

之前遇到的问题 #

实现transparentNavbar()函数时，子元素hover变色功能失效；尝试用stopPropagation()阻止事件冒泡后，Navbar的hover背景切换功能又无法正常工作。核心原因是重复绑定事件导致逻辑冲突，且JS直接操作样式难以处理复杂的hover状态叠加。

优化后的解决方案 #

改用CSS类名切换+CSS原生hover样式实现，彻底解决事件冲突问题，同时让样式逻辑更清晰。

完整代码实现 #

HTML结构示例

<nav class="navbar">
  <p>首页</p>
  <a href="#products">产品</a>
  <i class="icon-menu">☰</i>
  <div class="navbar-products">产品列表</div>
</nav>

CSS样式

/* Navbar基础样式，添加过渡动画让切换更平滑 */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem;
  transition: background-color 0.3s ease;
}

/* 子元素基础样式，统一过渡效果 */
.navbar p, .navbar i, .navbar a, .navbar-products {
  display: inline-block;
  margin: 0 1rem;
  transition: color 0.3s ease;
}

/* scrollY>0时的白色Navbar状态 */
.navbar.white {
  background-color: #fff;
}
.navbar.white p, .navbar.white i, .navbar.white a, .navbar.white .navbar-products {
  color: #000;
}

/* scrollY<=0时的透明Navbar状态 */
.navbar.transparent {
  background-color: rgba(0, 0, 0, 0.2);
}
.navbar.transparent p, .navbar.transparent i, .navbar.transparent a, .navbar.transparent .navbar-products {
  color: #fff;
}

/* 透明状态下Navbar hover的样式切换 */
.navbar.transparent:hover {
  background-color: #fff;
}
.navbar.transparent:hover p, .navbar.transparent:hover i, .navbar.transparent:hover a, .navbar.transparent:hover .navbar-products {
  color: #000;
}

/* 所有状态下子元素hover的统一样式 */
.navbar p:hover, .navbar i:hover, .navbar a:hover, .navbar-products:hover {
  color: #ff7bac !important;
}

JavaScript代码

const navbar = document.querySelector('.navbar');
let timeout_n;

// 更新Navbar状态的核心函数
function updateNavbarState() {
  const scrollY = window.scrollY;
  // 先移除所有状态类，避免类名叠加
  navbar.classList.remove('white', 'transparent');
  // 根据滚动距离添加对应状态类
  navbar.classList.add(scrollY > 0 ? 'white' : 'transparent');
}

// 初始化Navbar状态
updateNavbarState();

// 滚动事件防抖处理，避免频繁触发
window.addEventListener('scroll', function () {
  clearTimeout(timeout_n);
  timeout_n = setTimeout(updateNavbarState, 10);
});

方案说明 #

1. 样式与逻辑分离：用CSS类控制不同状态下的样式，JS只负责根据滚动距离切换类名，代码更易维护。
2. 避免事件冲突：所有hover效果通过CSS原生实现，无需JS绑定重复事件，彻底解决之前的事件冒泡与叠加问题。
3. 性能更优：防抖处理减少滚动事件触发频率，CSS过渡动画比JS操作样式更流畅。

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