How to properly handle Navbar color change on Scroll in Angular?

Question

I\'m making a project in angular. I would like to add a navbar which have transparent background initially but on scroll it will change its color. I am using bootstrap class

Answer 1

import { HostListener } from '@angular/core';

You can achieve this with @HostListner in your Typescript file.

@HostListener('window:scroll', ['$event'])

onWindowScroll(e) {
    let element = document.querySelector('.navbar');
    if (window.pageYOffset > element.clientHeight) {
      element.classList.add('navbar-inverse');
    } else {
      element.classList.remove('navbar-inverse');
    }
  }

Put scroll event on HTML part.