如何使用 Angular 材質創建粘性標題？

Question

我想顯示粘header.On滾動header1應該被隱藏和header2應該表現出，我怎樣才能做到這一點使用的材料？

這是我預期的DEMO

提前致謝

Answer 1

無論您是否使用 Angular Material，粘性標題的基本實現都是相同的 - 觀察頁面的滾動位置並根據需要隱藏或顯示第二個標題。 這是一個使用 Angular Material 工具欄組件作為標題的粗略示例：

<div style="min-height: 150vh;"> <!-- Set minimum height to force a scrollbar -->
    <mat-toolbar color="primary">
        <mat-toolbar-row>
            <span>Header 1</span>
        </mat-toolbar-row>
    </mat-toolbar>

    <mat-toolbar color="secondary" style="position: fixed; top: 0;" *ngIf="scrolled">
        <mat-toolbar-row>
            <span>Header 2</span>
        </mat-toolbar-row>
    </mat-toolbar>
</div>

在 .ts 文件中：

scrolled: false;

@HostListener('window:scroll', [])
onWindowScroll() {
    // Depending on the desired effect, you should probably only show the second header
    // if you've scrolled past the first header's height
    this.scrolled = window.pageYOffset > 48;
}