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

Question

I'm trying to get an angular-material card to be sticky. Problem is it didn't seem to work, and I don't get why.

Is it because the parent component got a FxLayout ? I couldn't get my card to be sticky, here my code:

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;
}

I'd like to get the "progress-card" to stay sticky on the top of the screen as I scroll down to read the other card content.

Thanks for your help and your time.

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>