如何更改固定标题的大小答案

【问题标题】：how to change the size of a fixed header如何更改固定标题的大小
【发布时间】：2018-12-12 09:22:27
【问题描述】：

这是我项目的一部分：app

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

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码。了解如何创建minimal reproducible example

标签： css header styles angular-material sidenav

【解决方案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 类添加布局。

【讨论】：

非常感谢。这真的很有帮助。我可以将它应用到我的项目中。当应用有内容并且需要滚动时，标题是否固定？
我不认为它是固定的 - 您需要将其位置设置为绝对以使其具有粘性，并且您可能需要将内容位置调整到粘性标题下方以避免出现标题覆盖的内容。