CODEWITHSUNDEEP
jqueryhtmlcssangularbootstrap-4
Adam
Adam

Reputation: 361

How to change class on navbar when route change?

I have set my navbar class with scroll position

Script

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

How my code work When the page is on the top (not scrolling yet) navbar is transparent but when we scroll navbar turn white and then scroll back to top its turn to transparent as before.

What I want I know it's a bit complicated, but all I want is when it's on the home page it can use that script to make the navbar transparent. How about when I want the other page navbar to stay white even it's on the top without scrolling and when scrolling it stills white.

Image

It's transparent on the home when on top

It's turning white when I scroll down

I want this style to apply to the home page only, when we go to another page I want it to stay white always. What should I do guys? Thank for taking care of this.

Upvotes: 1

Views: 1018

Answers (1)

Inderjeet Klsi
Inderjeet Klsi

Reputation: 104

I hope you are using Angualr 2 and for both pages you have two different component.

In both component you can use 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");
                    }
             }
    }

In Others Components:

    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");
             }
    }

Upvotes: 1

Related Questions