html - 如何使用 Angular Material 创建粘性 header ？

Question

我想显示粘性标题。在滚动时 header1 应该被隐藏，header2 应该显示，我如何使用 ma​​terial 实现这个？

这是我的预期 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;
}