在Angular5中滚动X金额后如何显示按钮？

Question

我正在制作一个Angular5应用程序。滚动浏览主页上的旋转木马后，我想在屏幕上显示一个按钮，可以将您带回到顶部。

我尝试使用 @HostListener（“window：scroll”，[]）进行此操作。我想出了按钮如何让你回到顶部，但我不知道如何在专门滚过旋转木马后让它出现。

这是我现在拥有的，???是我不知道的部分。

  @HostListener("window:scroll", [])
  onScroll(): string {
    if (window.pageYOffset <= ???) {
      return this.state;
    }
  }

State是一个字符串：'none'，通过HTML属性绑定动态设置style.sisplay。

这是我的应用草图，使事情更清晰。

提前致谢！

Answer 1

让您的滚动事件检查y的值以查看它是否大于轮播位置，如果是，则返回可见的显示类型，

@HostListener("window:scroll", [])
  onScroll(): string {
    let carouselElement = document.getElementById('yourElementId');
    let carouselRect = carouselElement.getBoundingClientRect();
    let carouselYPos = carouselRect.top;

    if (window.pageYOffset <=carouselYPos) {
      return this.state;
    }
  }