javascript - 在滚动后修复 Angular 4 的标题

我在滚动后固定页眉时遇到了问题，我尝试了很多方法但都无法成功。我查看了这个帖子，但对我来说不起作用：Angular 4 @HostListener Window 滚动事件在 Firefox 中奇怪地不起作用。这是我的组件结构：

• 布局

  • 步骤
• 路线

Inside steps 是我的标题，我想在滚动 50px 后固定它。Inside Layout 是一些其他内容，比如一个带有徽标背景的 div（位于 steps 内容上方）。

这是我在 Steps.ts 中尝试的内容

@HostListener('window:scroll', [])
  onWindowScroll() {
    const number = window.scrollY;
    if (number > 40) {
      this.fixed = true;
    } else if (this.fixed && number < 10) {
      this.fixed = false;
    }
  }

但问题是滚动根本没有触发。我找到了一些示例，其中滚动会记录事件，但对我来说不起作用（我也尝试过使用 $event）。有人有解决方案吗？

答案＃1

找到了解决方案。在我的布局组件上我放了一个函数

(scroll)="onWindowScroll($event)"

在布局组件中，我使用了：

@HostListener('window:scroll', ['$event'])
  onWindowScroll($event) {
    const number = $event.target.scrollTop;
    if (number > 40) {
      this.fixed = true;
    } else if (this.fixed && number < 10) {
      this.fixed = false;
    }
  }

我移除了 Steps 组件，因为我不再需要它了，所有内容现在都在布局中。

答案＃2

在 Angular 5+ 中，它的工作方式稍有不同：

const number = $event.target.scrollingElement.scrollTop || $event.target.documentElement.scrollTop;