滾動後修正標題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;