Fix header after scrolling Angular 4

Question

I am having issue fixing the header after scrolling, I tried a lot of stuff but can't get it to work. I checked this thread but it doesnt work for me: Angular 4 @HostListener Window scroll event strangely does not work in Firefox . This is my component structure:

Layout
- Steps
Routes

Inside steps is my header which I want to fix, after scrolling for 50px. Inside Layout is some other content like a div with logo background (above the content of steps).

This is what I tried inside 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;
    }
  }

but the problem is that scroll is not triggering at all. I found examples where scroll logs the event, but for me it doesn't work (I tried with $event as well). Anyone has a solution?

score 3 · Accepted Answer · answered Aug 30 '17 at 10:22

Found a solution. On my layout component I put a function

(scroll)="onWindowScroll($event)"

and in layout component i used:

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

I removed Steps component since I didnt need it anymore, all the content is inside layout now.

The easiest of all of them present! – Nitesh Feb 12 '18 at 07:14 — Nitesh, Feb 12 '18 at 07:14

Adrian · Answer 2 · 2018-08-03T10:53:19.473

3

In Angular 5+ it works a little differently:

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

edited Aug 03 '18 at 10:53

answered Mar 07 '18 at 10:33

Adrian

201
2
8

score 0 · Answer 3 · answered Nov 20 '18 at 11:41

Since some people come via Google to this question:

I'm quite a fan of moving logic like this into something re-useable. For Angular this would mean a directive. Therefore as I run into this issue myself I created a library from my code that at least has some tests and support across many browsers. So feel free to use this tested piece of code instead of polluting your components with more code.

https://w11k.github.io/angular-sticky-things/

With the code I see in the answer I did run into some issues. In another SO I found this solution. It is crucial to determine the offsetY of the header element correctly.

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

Fix header after scrolling Angular 4

3 Answers3