Question

这是我的项目的一部分：app

我想在滚动中修复标题，并在header.component.html文件的标题中添加了bootstrap fixed-top类。但是，当我将sidenav的模式更改为side时，标题不变，并被推到左侧。我该如何解决这个问题？

Answer 1

您不需要使用引导程序的fixed-top-您只需要将标题放置在正确的位置。对于您的“侧面”模式，标头必须位于sidenav内容内，以便将其与内容一起推送。对于“ over”模式，标头必须完全在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类，并为mode和pushed定义了默认值。

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

如何更改固定标头的大小

1 个答案: