Witam.
Mam pewien problem w Angularze i nie bardzo wiem co zrobiłem źle. Próbowałem sticky
.Domyślnie material-navigation-bar ma position:fixed
, a mimo to scrolluje mi razem z tym co wczytałem w home.component
. Czy powodem jest products$ | async
?
Chce, aby bottom navigation bar był zawsze na dole nad contentem i się nie scrollował.
app.compoment.html
<mat-toolbar *ngIf="isAuthenticated" style="background-color: transparent;">
<span style="font-family: 'Permanent Marker', cursive;font-size: 26px;">lighters.pl</span>
<span class="spacer"></span>
<button mat-icon-button routerLink="search">
<i class="ph-magnifying-glass-light"></i>
</button>
<button mat-icon-button routerLink="account">
<i class="ph-user-circle-light"></i>
</button>
</mat-toolbar>
<router-outlet></router-outlet>
<nav class="bottom-nav mat-elevation-z0" style="overflow-y: scroll;">
<a class="bottom-nav__destination" routerLink="home" routerLinkActive="bottom-nav__destination--active">
<i class="ph-house-simple-light"></i>
<span class="bottom-nav__label">Home</span>
</a>
<a class="bottom-nav__destination" routerLink="cart" routerLinkActive="bottom-nav__destination--active">
<i class="ph-shopping-cart-simple-light"></i>
<span class="bottom-nav__label">Koszyk</span>
</a>
<a class="bottom-nav__destination" routerLink="orders" routerLinkActive="bottom-nav__destination--active">
<i class="ph-files-light"></i>
<span class="bottom-nav__label">Zamówienia</span>
</a>
<a class="bottom-nav__destination" routerLink="settings" routerLinkActive="bottom-nav__destination--active">
<i class="ph-gear-light"></i>
<span class="bottom-nav__label">Opcje</span>
</a>
</nav>
home.component.html
<div fxLayout="row wrap" fxLayoutGap="7px grid">
<app-product *ngFor="let product of products$ | async; index as i" [product]="product"></app-product>
</div>