路由更改时如何更改导航栏上的类？答案

【问题标题】：How to change class on navbar when route change?路由更改时如何更改导航栏上的类？
【发布时间】：2020-02-07 13:18:00
【问题描述】：

我已将导航栏类设置为滚动位置

脚本

    <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>

我的代码是如何工作的 当页面在顶部（尚未滚动）时，导航栏是透明的，但是当我们滚动导航栏时，导航栏会变成白色，然后滚动回顶部，它会像以前一样变成透明的。

我想要什么 我知道这有点复杂，但我想要的是当它在主页上时，它可以使用该脚本使导航栏透明。当我希望其他页面导航栏保持白色时如何，即使它在顶部而不滚动，滚动时它仍然是白色的。

图片

It's transparent on the home when on top

It's turning white when I scroll down

我希望这种样式仅适用于主页，当我们转到另一个页面时，我希望它始终保持白色。伙计们我该怎么办？感谢您的照顾。

【问题讨论】：

看看stackoverflow.com/questions/57714203/…，顺便说一句你可以避免使用JQuery，见netbasal.com/…

标签： jquery html css angular bootstrap-4

【解决方案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");
             }
    }

【讨论】：