My navbar class is set to change based on 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 the code functions: The page starts with a transparent navbar, which turns white as you scroll down and back to transparent when scrolling up.
Desired Outcome: For the home page, I want the navbar to be transparent at the top. On other pages, I want it to remain white even when at the top without scrolling, and stay white while scrolling.
Image Links:
Navbar appears transparent on home page at top
Navbar turns white upon scrolling down
I need this specific styling only for the home page. Any suggestions on how to achieve this would be greatly appreciated. Thank you for your help.