如何将“位置：粘性”应用于弹性布局中的角材料卡？答案

【问题标题】：How to apply "position: sticky" to an angular-material card in a flex-layout?如何将“位置：粘性”应用于弹性布局中的角材料卡？
【发布时间】：2019-03-25 22:36:17
【问题描述】：

我正在尝试让有角材质的卡片具有粘性。问题是它似乎不起作用，我不明白为什么。

是不是因为父组件有一个 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;
}

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

感谢您的帮助和时间。

【问题讨论】：

标签： css angular angular-material sticky angular-flex-layout

【解决方案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>

【讨论】：

感谢您的帮助。片段就像一个魅力，但它不会在我自己的代码上移动任何东西。我可能错过了一些要提供的信息，但这个项目非常庞大......我会回来提供更多信息，再次感谢！
@Alvard 欢迎您。部分 - 父级。你应该考虑建筑。在我的代码中，构造是不同的。我做了两个部分。也许你能找到更好的选择。但我的母语是俄语。英语是第二语言，我知道它更糟，也许我误解了什么。但是，我想帮助你。在俄罗斯网站上，我被不公平地屏蔽了。有时我可以在这里提供帮助。