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

Posted 2023-02-18

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

【英文标题】：How to make a toggleable mat-sidenav push also a fixed header in the mat-sidenav-content

【发布时间】：2020-09-19 01:27:05

【问题描述】：

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

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

这里是a stackblitz demo。

您知道如何使 mat-sidenav 也推送固定标题吗？

谢谢。

【参考方案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;