[英]How to create the sticky header using Angular material?
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.无论您是否使用 Angular Material,粘性标题的基本实现都是相同的 - 观察页面的滚动位置并根据需要隐藏或显示第二个标题。 Here's a rough example using the Angular Material toolbar component for the header:
这是一个使用 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>
And in the .ts file:在 .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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.