如何让Angular Mat-Panel-Title文本在屏幕上始终固定（Sticky）？

嗨，我完全懂你的困扰——横向滚动时面板标题跟着跑出视野，明明加了position:sticky却没效果对吧？这其实是Angular Material组件的默认布局和样式在“捣乱”，咱们来一步步搞定它：

为什么你的sticky没生效？ #

Angular Material的mat-expansion-panel-header默认是flex布局，而且部分父容器可能隐含了overflow设置，这会破坏sticky的定位上下文——sticky元素要求父级容器不能有overflow: hidden/auto这类截断溢出的属性，不然它就没法“粘”在视口上。

解决方案：调整样式与结构 #

咱们通过自定义CSS和模板调整来修复这个问题：

1. 先写自定义的CSS类，解决父容器的overflow问题，同时给标题设置正确的sticky属性：

/* 确保面板header不截断溢出内容 */
.custom-panel-header {
  overflow: visible !important;
}

/* 给标题设置sticky样式 */
.sticky-panel-title {
  position: sticky;
  left: 0;
  /* 继承header的背景色，避免滚动时后面内容透出来 */
  background-color: inherit;
  /* 让标题在内容上方显示 */
  z-index: 1;
  /* 确保在flex容器里sticky生效 */
  display: block;
  /* 可选：加个右边内边距，避免内容紧贴标题 */
  padding-right: 16px;
}

2. 修改你的模板，把自定义类应用到对应元素上：

<mat-accordion>
  <mat-expansion-panel *ngFor="let title of frameworks; first as isFirst" [expanded]="isFirst">
    <mat-expansion-panel-header class="custom-panel-header" [style]="getBackgroundColor(title)">
      <mat-panel-title class="sticky-panel-title" [style]="getBackgroundColor(title)">
        {{ title }} Framework
      </mat-panel-title>
    </mat-expansion-panel-header>
    <div>
      <svg id="{{ title }}-Framework" class="frame-base"></svg>
    </div>
  </mat-expansion-panel>
</mat-accordion>

额外排查点 #

如果还是没效果，检查一下mat-accordion本身有没有被设置了overflow属性，如果有的话也把它改成overflow: visible。另外要确保滚动容器是页面的body（或者你期望的滚动容器），sticky只会在它的直接滚动父容器内生效哦。

备注：内容来源于stack exchange，提问作者prashanth-g