欢迎来到我的博客！#

使用 Markdown 格式编写。

今天学到了什么#

sticky粘性定位
vw和vh单位
animation-timeline: view();
grid布局的一些细节

sticky粘性定位#

position: sticky;（粘性定位）是一种混合了 relative 和 fixed 特性的定位方式。

简单来说： 元素在跨越特定阈值（例如 top: 0）之前，表现得像普通元素（随页面滚动）；一旦滚动到了那个阈值，它就会“粘”在屏幕的那个位置不动，直到它的父容器滚动结束，它才会跟着父容器一起滚走。

在你的代码中的作用：

1
.main ul li {
2
  position: sticky;
3
  top: 0;
4
  /* ... */
5
}

吸顶效果：当页面向下滚动时，每个卡片（li）滚动到视口顶部（top: 0）时，就会停在那里不动。
堆叠效果：因为后面的卡片也会滚上来并停在同一个 top: 0 的位置，所以视觉上后面的卡片会盖住前面的卡片，形成一种“卡片层叠堆积”的特效。
离开：当整个列表容器（ul 或 .main）滚出屏幕时，这些粘住的卡片也会随之被带走。

使用条件：

必须指定 top、bottom、left 或 right 中的至少一个阈值。
父元素不能设置 overflow: hidden 或 overflow: auto（除非是想在那个特定的滚动容器内粘性定位），否则 sticky 可能会失效（但在你的代码里，li 是直接在 body 滚动的，所以没问题）。

grid布局的一些细节#

这涉及 CSS Grid 布局的一个隐蔽特性。

原因： 在 Grid 布局中，子元素（Grid Item）的默认 min-height 是 auto。这意味着浏览器会强制让子元素的高度至少能装下它里面的所有内容。如果你的文字内容算出来的高度（比如 417px）超过了父容器 li 设定的高度（40vw，比如 290px），Grid 就会优先满足“装下内容”的需求，从而忽略你设置的 height: 100%，导致 .l 撑破父容器。

为什么 style.css 没问题？ 可能是因为原案例中的文字内容较少、字体渲染差异，或者图片撑开的方式不同，导致其内容高度恰好没有超过 40vw，所以没有触发这个溢出行为。

解决办法： 必须显式地告诉浏览器：“允许这个 Grid 子元素的高度小于它的内容高度”。我已经帮你修改了代码，添加了 min-height: 0;。

1
 .main ul li .l {
2
   display: grid;
3
   justify-items: center;
4
   align-items: center;
5
   text-align: center; /* 之前加的 */
6
   height: 100%;
7
   min-height: 0; /* 新增：允许高度收缩，不再被内容强制撑大 */
8
 }

这样 .l 就会乖乖听话，严格保持和 li 一样的高度了。如果文字实在太多，它会溢出被 li 的 overflow: hidden 切掉，而不会撑大盒子。

在这里我是又设置了 grid-template-rows: 100%;也能完成同样的效果

案例完整代码

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Document</title>
8
  <link rel="stylesheet" href="./MyStyle.css">
9

10
</head>
11

12
<body>
13
  <!-- 头部制作 -->
14
  <header class="header">
15
    <div>
16
      <h1>泰山美景·卡片滚动</h1>
17
      <p>👇 滚动页面，查看卡片滚动效果。</p>
18
    </div>
19
  </header>
20
  <!-- 主体部分 -->
21
  <main class="main">
22
    <ul>
23
      <li>
24
        <div class="l">
25
          <div>
26
            <h2>云海玉盘</h2>
27
            <p>云海玉盘,是泰山的四大奇观之一,多在夏秋两季出现。</p>
28
            <a href="#">了解更多</a>
29
          </div>
30
        </div>
31
        <figure>
32
          <img src="../素材/1.png" alt="">
33
        </figure>
34
      </li>
35
      <li>
36
        <div class="l">
37
          <div>
38
            <h2>云海玉盘</h2>
39
            <p>云海玉盘,是泰山的四大奇观之一,多在夏秋两季出现。</p>
40
            <a href="#">了解更多</a>
41
          </div>
42
        </div>
43
        <figure>
44
          <img src="../素材/2.png" alt="">
45
        </figure>
46
      </li>
47
      <li>
48
        <div class="l">
49
          <div>
50
            <h2>云海玉盘</h2>
51
            <p>云海玉盘,是泰山的四大奇观之一,多在夏秋两季出现。</p>
52
            <a href="#">了解更多</a>
53
          </div>
54
        </div>
55
        <figure>
56
          <img src="../素材/3.png" alt="">
57
        </figure>
58
      </li>
59
      <li>
60
        <div class="l">
61
          <div>
62
            <h2>云海玉盘</h2>
63
            <p>云海玉盘,是泰山的四大奇观之一,多在夏秋两季出现。</p>
64
            <a href="#">了解更多</a>
65
          </div>
66
        </div>
67
        <figure>
68
          <img src="../素材/4.png" alt="">
69
        </figure>
70
      </li>
71
    </ul>
72
  </main>
73
  <article class="article">
74
    .........
75
  </article>
76
</body>
77

78
</html>

1
<style>
2
 :root {
3
   --cardHeight: 50vw;
4
   --cardMargin: 4vw;
5
 }
6

7
 * {
8
   margin: 0;
9
   padding: 0;
10
   box-sizing: border-box;
11

12
 }
13

14
 ul,
15
 ol {
16
   list-style: none;
17
 }
18

19
 body {
20
   background-color: #3a1d2b;
21
   font-size: calc(1em + .5vw);
22
 }
23

24
 @keyframes scale {
25
   0% {
26
     transform: scaleX(1);
27
   }
28

29
   100% {
30
     transform: scaleX(0.8);
31
   }
32
 }
33

34
 .header {
35
   width: 100vw;
36
   height: 100vh;
37
   background-color: #3a1d2b;
38
   display: flex;
39
   justify-content: center;
40
   align-items: center;
41
   color: #ffffff;
42
   text-align: center;
43
 }
44

45
 .header h1 {
46
   font-size: 3.5vw;
47
   margin-bottom: 1vw;
48
 }
49

50
 .header p {
51
   font-size: 1.5vw;
52
 }
53

54
 .main {
55
   width: 80vw;
56
   margin: 0 auto;
57
 }
58

59
 .main ul li {
60
   position: sticky;
61
   top: 0;
62
   height: var(--cardHeight);
63
   margin-bottom: var(--cardMargin);
64
   background-color: white;
65
   display: grid;
66
   grid-template-columns: 1fr 1fr;
67
   grid-template-rows: 100%;
68
   border-radius: 1em;
69
   overflow: hidden;
70
   animation: scale 0.5s ease forwards;
71
   animation-timeline: view();
72
 }
73

74
 .main ul li figure img {
75
   height: 100%;
76
   width: 100%;
77
 }
78

79
 .main ul li .l div {
80
   width: 80%;
81
 }
82

83
 .main ul li .l {
84
   display: grid;
85
   justify-items: center;
86
   align-items: center;
87
 }
88

89
 .main .l h2 {
90
   /* 字体不加粗 */
91
   font-weight: 300;
92
 }
93

94
 .main .l p {
95
   margin: 1em 0
96
 }
97

98
 .main .l a {
99
   text-decoration: none;
100
   color: #fff;
101
   background-color: rgb(188 87 36);
102
   padding: .5em;
103
   border-radius: .25em;
104
 }
105

106
 .article {
107
   width: 50vw;
108
   margin: 0 auto;
109
   color: #ffffff;
110
 }
111

112
</style>

Lovely firefly!

In Finalized Morrow, I Full Bloom

页面滚动的卡片网站

欢迎来到我的博客！#

今天学到了什么#

sticky粘性定位#

grid布局的一些细节#

赞助支持

目录