Angular 2 - 当 div 到达浏览器顶部时添加一个类

Question

<div class="main-menu-wrapper home-menu **class to be added here**" >
      <div class="main-menu-inner">
          <a href="#" class="home-logo">
              <i class="logo"></i>

我需要在div到达浏览器顶部时添加一个类，

要求 是在每个 div 到达顶部时开始动画。(这是一个单页网站，有 anchor )

如何在 angular 2 中做到这一点；

Answer 1

Angular 有一个名为 HostListener 的函数装饰器，它接受一个事件名称作为参数。当在宿主元素上触发该事件时，它会调用关联的函数。我们可以使用它来检测元素何时到达浏览器顶部。

  @ViewChild('componentDiv') componentDiv: ElementRef;

  @HostListener('window:scroll', [])
  onWindowScroll() {
    const element = this.componentDiv.nativeElement;
    const viewportOffset = element.getBoundingClientRect();
    const top = viewportOffset.top;
    if (top <= 0) {
        // Do something
    }
  }

HTML 模板可能是这样的

<div style="border: solid 1px black" #componentDiv>
  <p>
    Angular is here.
  </p>
</div>