如何正确处理 Angular 滚动上的导航栏颜色变化？

Question

我正在做一个有角度的项目。我想添加一个最初具有透明背景的导航栏，但在滚动时它会改变它的颜色。我正在为此使用引导程序类

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

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

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

Answer 1

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

你可以@HostListner在你的Typescript文件中实现这一点。

@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>