Reputation: 361
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
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