滚动Angular 4后修复标题

时间:2017-08-30 09:18:05

标签: javascript angular

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

3 个答案:

答案 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,
  };