Angular material toolbar - Material behavior

问题

I am using Angular and Angular Material for a project. Since this project's design is based on Material, I am using Angular material for it's components.

I have created a toolbar via <mat-toolbar> and a tab list via mat-tab-group. And the page looks as follows:

This is all ok. The first tab also contains a list And this is where the problem starts..

---

The Problem

When you normally scroll down the list, according to material design:

the top bar should scroll away and the tabs should be on top. This is not the standard behavior of Angular Material and I am wondering if this is possible to recreate?

I've recreated the default behavior in a stackblitz.

---

My versions

• Angular: 7.2.6
• Angular Material: 7.3.3

回答1:

Using your existing stackblitz, Add this to your app.component.ts:

.mat-tab-group{height: 100%;position: fixed; width:98vw;}
.mat-toolbar.mat-primary { width:98vw; }

Add this to your styles.css:

body { margin:1vw !important; }

the key to the effect which you're looking for is `.mat-tab-group{height: 100%;position: fixed;} ... but you'll see that the mat-group will be shorter than the mat-toolbar which looks kinda ugly... so we set them both to the same width... but now we got another issue, the margin is weird, that is because the body is set to a margin of 8px, so finally we override the absolute number 8px with 1vw... so it looks pretty.

Hope this answers your question.

回答2:

I got a bit confused about your problem but if you want to stick the tab header to top when it scrolls down.

Add the below code to your existing stackblitz CSS file. These may definitely work.

.mat-tab-group .mat-tab-header
{
  position: sticky;
  top:0;
}

来源：https://stackoverflow.com/questions/54958584/angular-material-toolbar-material-behavior