如何正确处理 Angular 滚动上的导航栏颜色变化? [英] How to properly handle Navbar color change on Scroll in Angular?

问题描述

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

I'm making a project in angular. I would like to add a navbar which have transparent background initially but on scroll it will change its color. I am using bootstrap classes for that

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

My Navbar heading is html code:

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

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

where can I add my Script to change its color on Scroll

推荐答案

您可以使用 Typescript 文件中的 @HostListner 实现此目的.

You can achieve this with @HostListner in your Typescript file.

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 部分.

Put scroll event on HTML part.

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

这篇关于如何正确处理 Angular 滚动上的导航栏颜色变化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！