css - 如何使可切换的 mat-sidenav 推送也成为 mat-sidenav-content 中的固定标题

Question

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

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

这是一个 stackblitz 演示。

你知道我怎样才能让 mat-sidenav 也推动固定的标题吗？

谢谢。

Answer 1

您必须从.content__header中删除这些样式：

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

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

.content__header类现在应该如下所示：

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