Angular 11中如何实现滚动时修改sticky吸顶头部的背景色

你当前的代码仅实现了头部的吸顶定位效果，未添加滚动监听、底部位置判断、样式动态切换的相关逻辑，因此背景修改不生效，可按以下步骤实现需求：

1. 补充CSS样式 #

先给头部设置默认背景，以及滚动到底部时的目标背景样式：

/* app.component.css */
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  /* 头部默认背景 */
  background: #ffffff;
  /* 可选：加过渡动画让颜色切换更自然 */
  transition: background 0.3s ease;
}
/* 滚动到底部时激活的背景类 */
.sticky.header--bottom {
  background: #2563eb; /* 替换为你需要的目标背景色 */
  color: #ffffff;
}

2. 绑定动态样式类 #

修改HTML结构，用Angular的ngClass指令实现类名的动态切换：

<!-- app.component.html -->
<div 
  class="header sticky"
  [ngClass]="{'header--bottom': isScrollToBottom}"
>
  头部内容
</div>
<!-- 页面主体内容，需要足够高度撑出滚动条测试效果 -->
<div class="content" style="height: 200vh;">
  页面主体内容
</div>

3. 添加滚动监听逻辑 #

在组件类中监听全局滚动事件，判断是否滚动到页面底部：

// app.component.ts
import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 标记是否滚动到底部
  isScrollToBottom = false;

  // 监听窗口滚动事件
  @HostListener('window:scroll', [])
  onWindowScroll() {
    // 滚动条垂直滚动距离
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 浏览器视口高度
    const clientHeight = document.documentElement.clientHeight;
    // 页面总高度
    const scrollHeight = document.documentElement.scrollHeight;

    // 判断是否滚动到底部，预留2px阈值避免设备滚动精度问题
    this.isScrollToBottom = scrollTop + clientHeight >= scrollHeight - 2;
  }
}

如果你的滚动区域是页面内的局部容器而非全局页面，把滚动事件绑定到对应滚动容器即可，不用监听全局window的滚动事件。

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