How to properly handle Navbar color change on Scroll in Angular?
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.
<nav class="navbar navbar-expand-md sticky-top" (scroll)="onWindowScroll($event);"></nav>