Как применить «position: sticky» к карточке с угловым материалом в flex-макете? - PullRequest
Новая
       31

Как применить «position: sticky» к карточке с угловым материалом в flex-макете?

0 голосов
/ 25 марта 2019

Я пытаюсь заставить карту углового материала быть липкой. Проблема в том, что это не сработало, и я не понимаю, почему.

Это потому, что родительский компонент получил 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;
}

Я бы хотел, чтобы «карточка прогресса» оставалась закрепленной в верхней части экрана, когда я прокручивал вниз, чтобы прочитать содержимое другой карточки.

Спасибо за вашу помощь и ваше время.

1 Ответ

0 голосов
/ 25 марта 2019 

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>
...