CODEWITHSUNDEEP
htmlcssangularangular-material
prudhvi
prudhvi

Reputation: 21

How to create the sticky header using Angular material?

I want to display sticky header.On scroll header1should be hidden and header2 should show,How can i achieve this using material?

Here is my expected DEMO

Thanks in advance

Upvotes: 1

Views: 1604

Answers (1)

codequiet
codequiet

Reputation: 1242

The basic implementation of a sticky header is the same whether you use Angular Material or not - watch the scroll position of the page and hide or show the second header as desired. Here's a rough example using the Angular Material toolbar component for the header:

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

And in the .ts file:

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

Upvotes: 1

Related Questions