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>

如何在可弯曲布局中将“位置：粘性”应用于角材料卡？

1 个答案: