Search code examples
cssangularbootstrap-4

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

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 classes for that

My Navbar heading is html code:

<nav class="navbar navbar-expand-md sticky-top">
    ...
</nav>

where can I add my Script to change its color on Scroll

Solution

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

    import { HostListener } from @angular/core;

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

onWindowScroll() {
    let element = document.querySelector('.navbar') as HTMLElement;
    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();"></nav>