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点击顶部时启动动画。（它是一个单页网站，有锚定）

如何在角度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>

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

1 个答案: