带粘性定位的叠放卡片和一点 Sass

前几天，我看到了 Corey Ginnivan 的网站 上这段特别棒的内容，其中一些卡片在您滚动时会叠放在一起。

我开始思考这需要多少 JavaScript 才能实现，以及如何制作它，这时我意识到——啊！——这应该是 `position: sticky` 和少量 Sass 的杰作。 因此，没有深入探讨 Corey 是如何做到的，我决定自己尝试一下。

首先，为卡片设置一些默认样式

body {
  background: linear-gradient(#e8e8e8, #e0e0e0);
}

.wrapper {
  margin: 0 auto;
  max-width: 700px;
}

.card {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  color: #333;
  padding: 40px;
}

接下来，我们需要将每个卡片都粘贴到包装器的顶部。 我们可以这样做

.card {
  position: sticky;
  top: 10px;
  // other card styles
}

这让我们得到了这个结果

但是，我们如何使这些元素看起来像叠放在一起呢？ 好吧，我们可以使用一些奇特的 Sass 魔法来修复每个卡片的位置。 首先，我们将循环遍历每个卡片元素，然后在每次迭代中更改其值

@for $i from 1 through 8 {
  .card:nth-child(#{$i}n) {
    top: $i * 20px;
  }
}

这将产生以下演示，如果我说得没错的话，它绝对迷人

就这样！ 我们可以在此处进行一些视觉更改以改进它。 例如，每个卡片的 `box-shadow` 和颜色，就像 Corey 的示例一样。 但是我想在这里继续试验。 如果我们改变卡片的顺序，并将它们改为横向排列会怎么样？

我们在这个网站上已经这样做过了

在试验了一段时间后，我用 flexbox 改变了卡片的顺序，并使每个项目从右到左滑动进来

.wrapper {
  display: flex;
  overflow-x: scroll;
}

.card {
  height: 60vh;
  min-width: 50vw;
  position: sticky;
  top: 5vh;
  left: 10vw;
}

但我也想让每个卡片以不同的角度进入，所以我用随机函数更新了 Sass 循环

@for $i from 1 through 8 {
  .card:nth-child(#{$i}n) {
    left: $i * 20px;
    left: random(200) + $i * 1px;
    top: random(130) + $i * 1px;
    transform: rotate(random(3) - 2 * 1deg);
  }
}

这是大部分更改，最终得到以下结果

相当不错，对吧？ 我非常喜欢 `position: sticky;`。