css - 如何在 Angular 中正确处理 Scroll 上的导航栏颜色变化？

Question

我正在做一个 Angular 元素。我想添加一个最初具有透明背景的导航栏，但在滚动时它会改变它的颜色。我正在为此使用 bootstrap 类

我的导航栏标题是 html 代码:

<nav class="navbar navbar-expand-md sticky-top">
    ...
</nav>

我在哪里可以添加我的脚本来改变它在滚动上的颜色

Answer 1

您可以通过 @HostListner 实现此目的在您的 Typescript文件。

import { HostListener } from @angular/core;

@HostListener('window:scroll', ['$event'])

onWindowScroll() {
    let element = document.querySelector('.navbar') as HTMLElement;
    if (window.pageYOffset > element.clientHeight) {
      element.classList.add('navbar-inverse');
    } else {
      element.classList.remove('navbar-inverse');
    }
  }

将滚动事件放在 HTML 部分。

<nav class="navbar navbar-expand-md sticky-top" (scroll)="onWindowScroll();"></nav>