如何使用角度材料设计将工具栏设置到固定位置？

Question

如何使用角度材料将工具栏位置固定为固定？我已经尝试过固定的位置，但是对我不起作用。请建议我该怎么做。

这是我的代码：

<div fxLayout="row" fxLayoutAlign="space-between" class="fixed-header header-shadow" style="width:100%;position:relative">
  <mat-toolbar   color="primary" fxFlexFill role="banner" class="header-style header-shadow">
    <mat-toolbar-row>
      <div>
          <a  mat-button  routerLink="#"  routerLinkActive="active" (click)="opened=!opened"><mat-icon class="mat-icon-rtl-mirror mat-icon notranslate mat-icon-no-color ng-star-inserted" role="img">menu</mat-icon></a>
          <a  mat-button  routerLink="#"  routerLinkActive="active">{{application_title}}</a>
      </div>
      <div fxShow="true" fxHide.lt-md="true" class="example-fill-remaining-space">

          <a  mat-button  routerLink="/customer-list"  routerLinkActive="active">Customers</a>
          <a  mat-button  routerLink="/customer-create">Create Customer</a>
          <a  mat-button  routerLink="/login">Login</a>
      </div>
      <div>
          <a  mat-button  routerLink="#"  routerLinkActive="active"><mat-icon>notifications</mat-icon></a>
          <a  mat-button  routerLink="#"  routerLinkActive="active" fxShow="true" fxHide.lt-md="true">Prem Kuma Pallinti</a>
          <a  mat-button  routerLink="#"  routerLinkActive="active" fxShow="true" fxHide.lt-md="true"><img aria-hidden="true" src="C:/Users/Prem/Desktop/FinalApp/images/man-avater.png"></a>
          <a  mat-button  routerLink="/login"><mat-icon class="mat-icon-rtl-mirror mat-icon notranslate mat-icon-no-color ng-star-inserted" role="img">more_vert</mat-icon></a>
      </div>

    </mat-toolbar-row>


    </mat-toolbar>
    <main>
    <router-outlet  style="margin-top: 80px;"></router-outlet>
    </main>

</div>

code

Answer 1

您应该删除style="width:100%;position:relative"。 并为

添加CSS

.fixed-header: {
   width:100%;
   position: fixed;
   top:0;
   ...
}