如何更改固定大小 header

Question

这是我项目的一部分：app

我希望 header 固定在滚动中，我将 bootstrap fixed-top class 添加到 header.component.html 文件中的 header。但是当我将 sidenav 的模式更改为 side 时，header 不会改变并被推到左边。我该如何解决这个问题？

Answer 1

您不需要使用 bootstrap 的 fixed-top - 您只需要将 header 放在正确的位置。对于您的 'side' 模式，header 需要位于 sidenav 内容内，以便它与内容一起推送。对于 'over' 模式，header 需要完全位于 sidenav 之上和之外。您可以使用模板逻辑来做到这一点：

<ng-container *ngIf="!pushed" [ngTemplateOutlet]="appHeader"></ng-container>

<mat-sidenav-container class="theme-sidenav-container" autosize>

    <mat-sidenav class="theme-sidenav" #sidenav [mode]="mode" position="end" opened="false" (mouseleave)="pushed? 2+2 :sidenav.toggle()">
        ...
    </mat-sidenav>

    <mat-sidenav-content class="theme-main-content">

        <ng-container *ngIf="pushed" [ngTemplateOutlet]="appHeader"></ng-container>

        <router-outlet></router-outlet>

    </mat-sidenav-content>

</mat-sidenav-container>

<ng-template #appHeader>
  <app-header (toggleSidenav)="sidenav.toggle()" [menuAvailable]="pushed"></app-header>
</ng-template>

这里是 StackBlitz。请注意，我还删除了 fixed-top class 并为 mode 和 pushed.

定义了默认值

这可能不是您想要的，但它向您展示了如何动态更改 header 位置。您可能需要将布局添加到 app-sidenav 和 theme-main-content class.

如何更改固定大小 header

how to change the size of a fixed header

css

header

styles

angular-material

sidenav