滚动时修改Header背景色失效问题求助

你的代码核心问题出在SCSS的选择器写法上，另外可以优化Angular中的事件监听方式，以下是具体修复方案：

1. 修复SCSS选择器错误 #

你当前把.change-header-background写成了.header的子元素选择器，但实际上这个类是要直接加到.header元素本身的，需要用&引用父选择器：

.header {
    border-top: 0.5rem solid #000;
    position: fixed;
    width: 100%; /* 可选：确保header占满视口宽度 */
    transition: background-color 0.3s ease; /* 可选：添加平滑过渡动画 */

    // 正确写法：给.header自身添加类时生效
    &.change-header-background {
        background-color: white;
    }    
}

2. 优化Angular滚动监听逻辑（推荐） #

避免直接操作DOM，改用Angular内置的@HostListener实现数据驱动的样式控制，更符合组件化规范：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  isScrolled = false;

  ngOnInit(): void {
    // 初始化时检查滚动位置，避免页面刷新后样式异常
    this.checkScrollState();
  }

  @HostListener('window:scroll')
  onWindowScroll() {
    this.checkScrollState();
  }

  private checkScrollState() {
    this.isScrolled = window.scrollY !== 0;
  }
}

然后在组件模板中直接绑定类：

<header class="header" [class.change-header-background]="isScrolled">
  <!-- 你的Header内容 -->
</header>

3. 保留原DOM操作方式的修复（不推荐） #

如果坚持使用原生DOM操作，除了修复SCSS，还要确保.header元素在组件模板中正确存在，且没有其他样式覆盖背景色：

export class HeaderComponent implements OnInit {
  ngOnInit(): void {
    const header = document.querySelector('.header');
    // 初始化时先执行一次
    this.updateHeaderStyle(header);
    
    document.addEventListener('scroll', () => {
      this.updateHeaderStyle(header);
    });
  }

  private updateHeaderStyle(header: Element | null) {
    if (!header) return;
    window.scrollY === 0 
      ? header.classList.remove('change-header-background') 
      : header.classList.add('change-header-background');
  }
}

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