滚动后我遇到修复标题的问题,我尝试了很多东西,但无法让它工作。我检查了这个帖子,但它对我不起作用:Angular 4 @HostListener Window scroll event strangely does not work in 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;
}
}
但问题是滚动根本没有触发。我找到了examples 滚动记录事件的位置,但对我来说它不起作用(我尝试使用$ event)。有人有解决方案吗?
答案 0 :(得分:3)
找到解决方案。在我的布局组件上,我放了一个函数
(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组件,因为我不再需要它了,所有内容现在都在布局内。
答案 1 :(得分:3)
在Angular 5+中,它的工作方式略有不同:
const number = $event.target.scrollingElement.scrollTop || $event.target.documentElement.scrollTop;
答案 2 :(得分:0)
由于有人通过Google提出了这个问题:
我非常喜欢将这样的逻辑转换为可重用的东西。对于Angular来说,这意味着一个指令。因此,当我自己遇到这个问题时,我使用自己的代码创建了一个库,该库至少具有一些测试和跨许多浏览器的支持。因此,请随意使用经过测试的这段代码,而不用用更多的代码污染您的组件。
https://w11k.github.io/angular-sticky-things/
我在答案中看到的代码确实遇到了一些问题。在另一个SO中,我找到了这个解决方案。正确确定标头元素的offsetY至关重要。
// Thanks to https://stanko.github.io/javascript-get-element-offset/
function getPosition(el) {
let top = 0;
let left = 0;
let element = el;
// Loop through the DOM tree
// and add it's parent's offset to get page offset
do {
top += element.offsetTop || 0;
left += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return {
y: top,
x: left,
};