如何实现mat-sidenav-container内Angular表格表头的粘性定位

问题根因 #

• position: sticky 仅相对于最近的可滚动祖先元素生效，放在mat-sidenav-container内部时，滚动容器从全局window变为了mat-sidenav-content，Angular Material table 默认的粘性表头逻辑监听的是全局滚动事件，无法识别sidenav内的滚动容器，因此失效。

修复步骤 #

方法1：使用mat-table内置stickyHeader属性（推荐） #

1. 给mat-sidenav-content添加模板引用变量，示例代码：

<mat-sidenav-content #sidenavScroll>
  <!-- 你的表格代码 -->
</mat-sidenav-content>

2. 给mat-table绑定scrollContainer输入属性，指定滚动容器为上面的sidenav内容容器：

<table mat-table [dataSource]="dataSource" stickyHeader [scrollContainer]="sidenavScroll">
  <!-- 表头、表格行代码省略 -->
</table>

3. 按需调整表头样式，防止内容透显：

.mat-header-cell {
  background: #fff; /* 匹配你的页面背景色 */
  z-index: 1;
}

如果需要设置表头偏移（比如顶部有固定导航栏），直接给mat-header-cell设置top: 你的偏移值即可。

方法2：自定义CSS实现 #

如果不使用内置的stickyHeader属性，直接用原生CSS实现：

1. 确认mat-sidenav-content保留默认的overflow: auto和position: relative属性，不要修改。
2. 给表头单元格添加如下样式：

.custom-table .mat-header-cell {
  position: sticky !important;
  top: 0; /* 按需调整偏移值 */
  z-index: 10;
  background: inherit;
}

注意事项 #

• 检查表格和mat-sidenav-content之间的所有父级元素，不要设置overflow: hidden/scroll/auto属性，否则会改变sticky定位的上下文，导致失效。
• 如果表格外层必须嵌套可滚动容器，将该容器设置为scrollContainer的值即可。

内容的提问来源于stack exchange，提问作者Ya.