Sticky Header in Angular

HTML

 [ngClass]="isSticky ? 'sticky' : 'noSticky'" (scroll)="onScroll()"

TS

isSticky = false;

@HostListener('window:scroll', [ '$event' ]) onScroll(){
    if (window.scrollY > 0) {
      this.isSticky = true;
    } else {
      this.isSticky = false;
    }
  }

SCSS

&.sticky{
      position: fixed;
      top: 0;
      width: 100%;
      transition: all .3s ease-in-out;
      .hirado-menu-bottom-logo {
        margin-top: 0;
      }
      .hirado-menu-bottom-logo-img {
        width: 60px;
        transition: all .3s ease-in-out;
      }
    }