Angular如何设置导航栏固定？

Question

我已使用此命令 ng generate @angular/material:material-nav --name=home 创建了一个导航栏，并且我希望在向下滚动时将导航栏固定在顶部。

我用我的 mat-sidenav-content 尝试了position: fixed;，但没有成功。你们知道我该怎么做吗？

navbar.component.html

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="false"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>checkout</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

navbar.component.ts

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      shareReplay()
    );

  constructor(private breakpointObserver: BreakpointObserver) {}

谢谢！

Answer 1

尝试将fixedInViewport 从false 更改为true。

Answer 2

如果您在 sidenav 上方有内容，您可以使用 position sticky：

<mat-sidenav-container class="sidenav-container" style="position:sticky; top: 0">
....
</mat-sidenav-container>

但不幸的是，并非所有浏览器都支持它 (https://caniuse.com/css-sticky)。

第二种方式，你可以使用位置固定（在这种情况下它上面应该没有元素）：

<mat-sidenav-container class="sidenav-container" style="position:fixed; width: 100%; top: 0">
....
</mat-sidenav-container>