How to hit a function when scroll position is reaches the top position?

Question

When scroll position hit the top position of the document the function is called. How to do that?

Answer 1

Good way to do it is to use the HostListener

@HostListener("window:scroll", [])
onWindowScroll() {
    let scroll = this.window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0;
    if (number = 0) {
      // Do some stuff here
    }
}

Now I just wanna add that you probably need to account for elastic scroll on mac desktops. Meaning that your scroll position can go in minus, and might not hit 0 exactly when you want this event to fire.

Here is a good blog post about this, if you want more reading material

Answer 2

Use addEventListener on body, and listen for 'scroll' event, then when event is fired check scrollY property of window, and if it is 0, then you are on top.

function yourFunction() {
  console.log('you are on top');
}

window.addEventListener('scroll', () => {
  if (window.scrollY == 0) yourFunction();
}, true);

Answer 3

You can use HostListener to listen to the scroll event

@HostListener("window:scroll", ["$event"])
onWindowScroll() {
 // get scroll postion 
  let number = this.window.pageYOffset || 
  this.document.documentElement.scrollTop || this.document.body.scrollTop || 
  0;

 // here you can check the scroll postion
  if (number > 100) {

  } 
}