如何使可切换的 mat-sidenav 在 mat-sidenav-content 中也推送固定的 header

Question

我正在使用 mat-sidenav-container 创建我的页面的桌面版本，但我想使 mat-sidenav 可切换，我已经设法做到了。现在的问题是我在 mat-sidenav-content 上有一个固定的 header，当显示 mat-sidenav 时，那部分没有被推送。

对于 mat-sidenav 内容，我使用 css 网格将此部分分为两部分（固定 header 和主要内容）

这里是a stackblitz demo。

你知道我怎样才能让 mat-sidenav 也推送固定的 header 吗？

谢谢。

Answer 1

您必须从 中删除这些样式。content__header:

height: 12rem;
position: fixed;
left: 0;

并向其添加 position: sticky。由于 position: fixed，方块无法被侧边栏推到一边，并且由于固定高度，当移除 position: fixed 时方块会溢出。特别不需要高度，因为您已经在 .content class 中指定了它：grid-template-rows: 12rem auto;。将其更改为 position: sticky 会使 header 仍然在滚动条上，但也会被推到一边。重要的是 top: 0 仍然存在。

.content__header class 现在应该是这样的：

.content__header {
  background-color: #eee;
  width: 100%;
  position: sticky;
  top: 0;
  padding: 0.5rem 1rem;
  z-index: 3;
}

如何使可切换的 mat-sidenav 在 mat-sidenav-content 中也推送固定的 header

How to make a toggleable mat-sidenav push also a fixed header in the mat-sidenav-content

css

sass

angular-material

mat-sidenav