Как создать липкий заголовок с использованием углового материала?

Question

Я хочу отобразить липкий заголовок. На свитке header1 должен быть скрыт и header2 должен показать, Как я могу добиться этого, используя материал ?

Вот мой ожидаемый ДЕМО

Заранее спасибо

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;
}