滚动Angular 4后修复标题

Question

滚动后我有问题修复标题,我尝试了很多东西,但无法让它工作.我检查了这个帖子,但它对我不起作用:Angular 4 @HostListener窗口滚动事件奇怪地在Firefox中不起作用.这是我的组件结构:

• 布局
  • 脚步
• 路线

在滚动50px之后,内部步骤是我要修复的标题.内部布局是一些其他内容,如带有徽标背景的div(在步骤的内容之上).

这是我在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).有人有解决方案吗？

Answer 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 组件，因为我不再需要它，所有内容现在都在布局内。