Question

滚动后我遇到修复标题的问题，我尝试了很多东西，但无法让它工作。我检查了这个帖子，但它对我不起作用：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）。有人有解决方案吗？

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

Answer 2

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

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

Answer 3

由于有人通过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,
  };

滚动Angular 4后修复标题

3 个答案: