如何在 angular 11 中更改滚动条上的粘性 header 背景颜色

Question

尝试将滚动条的背景颜色更改为粘性 header 但没有成功。怎么做？当我滚动到 body 底部时，我需要更改 header 背景颜色。怎么做？

app.component.html

<div class="header sticky">
</div>

app.component.css

 .sticky {
 position: -webkit-sticky;
 position: sticky;
 top: 0px;
 }

演示：https://stackblitz.com/edit/sticky-header-hyibz9?file=app%2Fheader%2Fheader.component.css

Answer 1

您可以为此使用 ngClass 和 HostListener 来检查用户是否在按钮处滚动

html

<div class="header sticky" [ngClass]="isBottom ? 'bottom' : 'top'">
</div>

ts

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  isBottom: boolean;

  constructor() {}

  ngOnInit() {}

  @HostListener('window:scroll', [])
  onScroll(): void {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
      this.isBottom = true;
    } else {
      this.isBottom = false;
    }
  }
}

css

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

.header {
  height: 50px;
}

.top {
  background-color: blue;
}

.bottom {
  background-color: yellow;
}

Answer 2

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  isBottom: boolean;

  constructor() {}

  ngOnInit() {}

  @HostListener('window:scroll', [])
  onScroll(): void {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
      this.isBottom = false;
    } else if (window.scrollY) {
      this.isBottom = false;
    } else  {
      this.isBottom = true;
    }
  }
}

如何在 angular 11 中更改滚动条上的粘性 header 背景颜色

How to change the sticky header background color on scroll in angular 11

css

angular8

angular11