Sticky card stacking

Tips
1

Hi everyone,

Here is a mini tutorial on how to achieve a sticky card stacking effect using the sticky position and a little SCCS: https://www.youtube.com/watch?v=gEPHfRhGUNQ

Here is the custom CSS used in the video:

@for $i from 1 through 4 {
  .div-cbf38f2:nth-child(#{$i}n) {
    top: $i * 100px;
  }
}

Note:

  • Be sure to change the class .div-cbf38f2 to your own card’s class
  • Depending on how many cards you have, be sure to change the through x to the necessary number.
    So for example if I have 10 cards, I would write:
    from 1 through 10

Enjoy :honey_pot:

5 Likes