Add and Remove class of an element with scroll - Angular

Question

I’m trying to make the navbar have a "Fixed-top" class when moving the scroll and removing the class when it’s at the top of the page.

I wrote the script below but it’s not working.

import { Component, OnInit, AfterContentInit } from '@angular/core';

@Component({
  selector: 'cb-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }
  ngAfterContentInit() {
    () => {
      let nav = document.getElementById('#nav');
      window.addEventListener('scroll', () => {
        if (window.scrollY > 1.5) {
            nav.classList.add("fixed-top");
            document.body.style.paddingTop = '70';
        }else {
          nav.classList.remove("fixed-top");
          document.body.style.paddingTop = '0';
        }
      });
    }
  }
}

Answer 1

Use @Hostlistener to listen to the scroll event. You can use Viewchild to pick up the component reference and Elementref to pick up the template reference that will change as well.

I did this example in stackblitz as an example.

https://stackblitz.com/edit/angular-viewchild-elementref?file=src/app/app.component.ts

Look at the code as it turned out

import { Component, HostListener, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  constructor(private app: ElementRef) {   
  }

  @ViewChild('exemplo', {read: ElementRef}) exemplo:ElementRef;

  @HostListener('window:scroll') onWindowScroll() {
    if (window.scrollY > 1.5) {
      this.exemplo.nativeElement.classList.add("fixed-top");
      this.app.nativeElement.classList.add("padding-top");
    } else {
      this.exemplo.nativeElement.classList.remove("fixed-top");
      this.app.nativeElement.classList.remove("padding-top");
    }    
  }

.app {
  display: block;
  padding: 1em 5em;
  transition: .3s all;
}

.app.padding-top {
  padding: 15em 3em 3em;
}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #000;
  color: #fff;
  width: 100%;
  padding: 2em 0;
  transition: .3s all;
}

.fixed-top > h1 {
  margin-left: 2em;
}

<my-app class="app">loading</my-app>
<hello #exemplo name="{{ name }}"></hello>