如何正确处理"Angular滚动"中的Navbar颜色更改? [英] How to properly handle Navbar color change on Scroll in 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

我的Navbar标题是html代码:

My Navbar heading is html code:

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

我可以在哪里添加脚本以在Scroll上更改其颜色

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

推荐答案

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

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

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

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

onWindowScroll(e) {
    let element = document.querySelector('.navbar');
    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($event);"></nav>

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