在滚动上突出侧边导航

Question

当我在angular中向下滚动页面时，我想让我的侧边导航改变它的颜色我知道主机监听器，但我不知道如何在我的项目中实现它们。

Answer 1

确定主机侦听器是侦听滚动事件的一种方法。

@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
console.log("scrolling...");
}

但也许你想听一些具体的东西?

<div #element (scroll)="onScroll(element)">

你可以使用[NgStyle]给你的侧边一个基于一些值的颜色?

myColor = 'red';
onScroll(element) {
console.log("scrolling...");
console.log(element.scrollTop)
if (element.scrollTop > 100) {
this.myColor = 'blue';
}

}

[ngStyle]="{'background-color': myColor }"