滚动后修正标题4滚动

Question

我在滚动后遇到修复标题的问题，我尝试了很多东西，但无法使其工作。我检查了这个线程，但它不适用于我：Angular 4 @HostListener Window scroll event strangely does not work in Firefox。这是我的组件结构：

• 布局
  • 步骤
• 路线

里面的步骤是我的头，我想修复，滚动的50像素后。内部布局是一些其他内容，如带有徽标背景的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; 
    } 
    } 

但问题是，滚动完全不触发。我发现examples 滚动记录事件，但对我来说它不起作用（我也尝试过$事件）。任何人都有解决方案？

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; 
    } 
    } 

我删除步骤组成部分，因为我没有需要它了，所有的内容在里面布局了。

Answer 2

在角5.2.5它的工作原理有点不同：

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