如何将“position：sticky”应用于flex-layout中的角度材料卡？

Question

我正试图让角质材料卡变得粘稠。问题是它似乎不起作用，我不明白为什么。

是因为父组件得到了FxLayout吗？我无法让我的卡变粘，这是我的代码：

HTML

<section fxLayout="row" fxLayoutGap="5%">
  <article class="progress-card" fxFlex="30">
    <mat-card fxLayout="column" fxLayoutAlign="center center">
      <mat-card-title><h2>PROGRESSION</h2></mat-card-title>
      <mat-card-content>
        <p>Text here</p>
      </mat-card-content>
    </mat-card>
  </article>
  <article fxFlex="70" fxLayout="column">
    <mat-card>
      <mat-card-title><h2>CONTENT</h2></mat-card-title>
      <mat-card-content>
        <p>Text here</p>
      </mat-card-content>
    </mat-card>
  </article>
</section>

CSS

.progress-card {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

当我向下滚动阅读其他卡内容时，我想让“进度卡”在屏幕顶部保持粘性。

感谢您的帮助和时间。

Answer 1

section.stycky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
body {
    height: 10000px;
}

<section fxLayout="row" fxLayoutGap="5%" class="stycky">
  <article class="progress-card" fxFlex="30">
    <mat-card fxLayout="column" fxLayoutAlign="center center">
      <mat-card-title><h2>PROGRESSION</h2></mat-card-title>
      <mat-card-content>
        <p>Text here</p>
      </mat-card-content>
    </mat-card>
  </article>
</section>

<section fxLayout="row" fxLayoutGap="5%">
  <article fxFlex="70" fxLayout="column">
    <mat-card>
      <mat-card-title><h2>CONTENT</h2></mat-card-title>
      <mat-card-content>
        <p>Text here</p>
      </mat-card-content>
    </mat-card>
  </article>
</section>