Angular中实现页面滚动时侧边导航栏高亮变色效果

核心逻辑就是通过宿主监听器绑定滚动事件，实时获取滚动偏移量，达到预设阈值时切换侧边栏的样式类即可，完整实现步骤如下：

1. 组件类（ts文件）实现 #

首先引入必要的Angular核心依赖，编写滚动监听逻辑：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss']
})
export class LayoutComponent {
  // 滚动变色阈值，单位px，滚动距离超过这个值就触发颜色变更
  private readonly scrollThreshold = 60;
  // 滚动状态标记
  isScrolled = false;

  // 监听window全局滚动事件
  @HostListener('window:scroll', [])
  onWindowScroll() {
    // 兼容多浏览器获取当前页面垂直滚动距离
    const scrollOffset = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
    // 更新滚动状态
    this.isScrolled = scrollOffset > this.scrollThreshold;
  }
}

如果你的页面滚动不是挂载在window上，而是在某个自定义容器（比如带overflow: auto的内容区），就把监听目标换成对应容器元素，回调里取该元素的scrollTop值即可。

2. 模板（html文件）绑定 #

给侧边栏元素动态绑定样式类，根据isScrolled状态切换类名：

<!-- 侧边导航栏元素 -->
<aside class="sidenav" [class.sidenav-scrolled]="isScrolled">
  <!-- 侧边栏内部导航内容 -->
  <nav>
    <a routerLink="/home">首页</a>
    <a routerLink="/list">列表页</a>
    <a routerLink="/about">关于我们</a>
  </nav>
</aside>

<!-- 页面主内容区 -->
<main class="main-content">
  <!-- 页面业务内容 -->
</main>

3. 样式文件编写 #

给侧边栏写默认样式、滚动后的变色样式，加过渡效果避免颜色跳变生硬：

.sidenav {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  // 默认背景色
  background-color: #ffffff;
  // 加0.3s的颜色过渡，交互更丝滑
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 999;
}

// 滚动触发后的侧边栏样式
.sidenav-scrolled {
  // 替换为你需要的目标颜色即可，示例用半透明白加阴影，也可换成主题色、深色等
  background-color: rgba(255,255,255,0.95);
  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
}

可选优化点 #

• 可以给滚动事件加节流处理，避免滚动时频繁触发回调影响性能，比如用rxjs的throttleTime操作符包装事件流
• 可以多设置几个滚动阈值，根据不同的scrollOffset区间绑定不同样式类，实现滚动距离越远颜色越深这类渐变效果
• 如果是Angular 17+的standalone组件，记得把CommonModule、RouterModule等依赖在组件imports数组中声明即可

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