I am encountering an issue with my toolbar. When I scroll down, the transparent background of the toolbar disappears and it looks like this: https://i.sstatic.net/YxZQe.png. How can I hide this component when the page is scrolled down and show it again when scrolling back up to the top of the page? Apologies for any language barriers due to my limited English proficiency.
EDIT: I am using a mat-toolbar
<mat-toolbar color="primary">
<button mat-button routerLink="/" [ngStyle]="{'color': colorStyle === 'WHITE' ? 'white' : 'black'}">
<mat-icon>home</mat-icon>
{{ 'PAGE.HOME' | translate}}</button>
<!-- This fills the remaining space of the current row -->
<span class="fill-remaining-space"></span>
<div fxLayout="row" fxShow="false" fxShow.gt-sm [ngStyle]="{'color': colorStyle === 'WHITE' ? 'white' : 'black'}">
<button mat-button routerLink="['/home']">{{ 'PAGE.HOME' | translate}}</button>
<button mat-button routerLink="['/home']">{{ 'PAGE.D9' | translate}}</button>
<button mat-button routerLink="['/home']">{{ 'PAGE.DThuDuc' | translate}}</button>
<button mat-button routerLink="['/home']">{{ 'PAGE.MORE' | translate}}</button>
<button mat-button [routerLink]="['/add']">{{ 'PAGE.ADD' | translate}}</button>
<button mat-button [routerLink]="['/login']" *ngIf="!loginStatus">{{ 'PAGE.LOGIN' | translate}}</button>
<button mat-button [routerLink]="['/login']" *ngIf="loginStatus">{{ 'PAGE.LOGOUT' | translate}}</button>
<button mat-button [routerLink]="['/show-map']" [queryParams]="{ lat: data.lat, lng: data.lng}">{{ 'PAGE.OVERVIEW' | translate}}</button>
</div>
<button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
<mat-icon>menu</mat-icon>
</button>
</mat-toolbar>
.mat-toolbar {
position: fixed;
z-index: 999;
}