Как изменить класс на navbar при изменении маршрута?

Question

Я установил свой класс navbar с позицией прокрутки

Скрипт

    <script>
     $(window).scroll(function () {
      if ($("#main-navbar").offset().top > 100) {
         $("#main-navbar").addClass("navbar-shrink");
      } else {
         $("#main-navbar").removeClass("navbar-shrink");
      }
    });
   </script>

HTML

      <nav class="navbar navbar-expand-lg rds-navbar py-0" id="main-navbar">
       <div class="container px-lg-0" id="navbar">
        <a class="navbar-brand mr-lg-5" [routerLink]="['en','home']">
            <img alt="ViPay" src="assets/img/logo.png" id="navbar-logo" style="height: 50px;">
        </a>
        <button class="navbar-toggler pr-0" type="button" data-toggle="collapse" data- 
         target="#navbar-main-collapse" aria-controls="navbar-main-collapse" aria-expanded="false" 
            aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar-main-collapse">
           <ul class="navbar-nav align-items-lg-center">
              <li  class="nav-item  mr-4">
                  <a class="nav-link "  [routerLink]="['en','personal']" 
                 routerLinkActive="rds__navbar-active" >Personal</a>
              </li>
           </ul>
         </div>
       </div>
    </nav>

Как работает мой код Когда страница находится вверху (пока не прокручивается), панель навигации прозрачна, но когда мы прокручиваем панель навигации, она становится белой, а затем прокручивается назад, чтобы повернуть ее к прозрачной, как раньше.

Что я хочу Я знаю, что это немного сложно, но все, что я хочу, это когда он находится на домашней странице, он может использовать этот скрипт, чтобы сделать панель навигации прозрачной. Как насчет того, когда я хочу, чтобы навигационная панель другой страницы оставалась белой, даже если она сверху, без прокрутки, а при прокрутке она остается белой.

Изображение

Это прозрачнов верхней части дома

Он становится белым, когда я прокручиваю вниз

Я хочу, чтобы этот стиль применялся только к домашней странице, когда мы переходим кдругая страница, я хочу, чтобы она всегда оставалась белой. Что мне делать, ребята? Спасибо, что позаботились об этом.

Answer 1

Я надеюсь, что вы используете Angualr 2, и для обеих страниц у вас есть два разных компонента.

В обоих компонентах вы можете использовать HostListener

    import {OnInit,OnChanges, HostListener} from '@angular/core';

    export class HomeComponent implements OnInit, OnChanges{
            constructor(){}
            ngOnChanges(){
    this.manageHeaderBackGround(window.pageYOffset);
  }
            @HostListener('window:scroll')
              scroll() {
                this.manageHeaderBackGround(window.pageYOffset);
              }

             manageHeaderBackGround(scrollOffSet: number){
                    if (scrollOffSet >= 100) {
                        $("#main-navbar").addClass("navbar-shrink");
                    } else {
                        $("#main-navbar").removeClass("navbar-shrink");
                    }
             }
    }

В других компонентах:

    import {OnInit, OnChanges, HostListener} from '@angular/core';

    export class OtherComponent implements OnInit, OnChanges{
            constructor(){}
            ngOnChanges(){
    this.manageHeaderBackGround(window.pageYOffset);
  }
            @HostListener('window:scroll')
              scroll() {
                this.manageHeaderBackGround(window.pageYOffset);
              }

             manageHeaderBackGround(scrollOffSet: number){
                //Show Your White Background Here always with class
                $("#main-navbar").addClass("navbar-shrink");
             }
    }