position: stickyについて

下記動画を見てcssの勉強をしているのですが。
[Sticky Text Full Page Scrolling Effects]
(https://www.youtube.com/watch?v=rVFbqBxiTJI)

position: sticky;が適用できないです。
何か原因はあるのでしょうか。

よろしくお願いします。

＊position: -webkit-sticky;をコメントアウトしても同じ結果になります。

html
1<html lang="ja">
2  <head>
3    <meta charset="utf-8">
4    <title>Scroll Effect</title>
5    <link rel="stylesheet" type="text/css" href="style.css">
6  </head>
7  <body>
8    <section class="banner">
9      <div class="container">
10        <div class="sec">
11          <h3>Scroll Down</h3>
12        </div>
13        <div class="sec"></div>
14        <div class="sec"></div>
15        <div class="sec"></div>
16        <div class="sec"></div>
17        <div class="sec"></div>
18        <div class="sec"></div>
19        <div class="sec"></div>
20        <div class="sec"></div>
21        <div class="content">
22          <h2>
23            <span style="--i:1;">R</span>
24            <span style="--i:2;">y</span>
25            <span style="--i:3;">u</span>
26            <span style="--i:4;">u</span>
27            <span style="--i:5;">b</span>
28            <span style="--i:6;">o</span>
29            <span style="--i:7;">k</span>
30            <span style="--i:8;">u</span>
31          </h2>
32        </div>
33        <div class="sec">
34          <h3>Thanks For Watching...</h3>
35        </div>
36      </div>
37    </section>
38  </body>
39</html>

css
1@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
2*
3{
4  margin: 0;
5  padding: 0;
6  box-sizing: border-box;
7  font-family: 'Poppins' , sans-serif;
8}
9.container
10{
11  position: relative;
12  width: 100%;
13  height: 100&;
14  overflow: auto;
15  scroll-behavior: smooth;
16  scroll-snap-type: y mandatory;
17}
18.sec
19{
20  position: relative;
21  width: 100%;
22  height: 100vh;
23  display: flex;
24  justify-content: center;
25  align-items: center;
26  background: #f00;
27  scroll-snap-align: center;
28}
29h3
30{
31  color: #fff;
32  font-size: 10vw;
33  text-align: center;
34  margin: 0 50px;
35}
36.sec:nth-child(1)
37{
38  background:  url(bg1.jpg);
39  background-size: cover;
40  background-attachment: fixed;
41  background-position: center;
42  background-blend-mode: multiply;
43}
44.sec:nth-child(2)
45{
46  background:  url(bg2.jpg);
47  background-size: cover;
48  background-attachment: fixed;
49  background-position: center;
50  background-blend-mode: multiply;
51}
52.sec:nth-child(3)
53{
54  background:  url(bg3.jpg);
55  background-size: cover;
56  background-attachment: fixed;
57  background-position: center;
58  background-blend-mode: multiply;
59}
60.sec:nth-child(4)
61{
62  background:  url(bg4.jpg);
63  background-size: cover;
64  background-attachment: fixed;
65  background-position: center;
66  background-blend-mode: multiply;
67}
68.sec:nth-child(5)
69{
70  background:  url(bg5.jpg);
71  background-size: cover;
72  background-attachment: fixed;
73  background-position: center;
74  background-blend-mode: multiply;
75}
76.sec:nth-child(6)
77{
78  background:  url(bg6.jpg);
79  background-size: cover;
80  background-attachment: fixed;
81  background-position: center;
82  background-blend-mode: multiply;
83}
84.sec:nth-child(7)
85{
86  background:  url(bg7.jpg);
87  background-size: cover;
88  background-attachment: fixed;
89  background-position: center;
90  background-blend-mode: multiply;
91}
92.sec:nth-child(8)
93{
94  background:  url(bg8.jpg);
95  background-size: cover;
96  background-attachment: fixed;
97  background-position: center;
98  background-blend-mode: multiply;
99}
100.sec:nth-child(9)
101{
102  background:  url(bg9.jpg);
103  background-size: cover;
104  background-attachment: fixed;
105  background-position: center;
106  background-blend-mode: multiply;
107}
108.sec:nth-child(11)
109{
110  background:  url(bg10.jpg);
111  background-size: cover;
112  background-attachment: fixed;
113  background-position: center;
114  background-blend-mode: multiply;
115}
116
117.content
118{
119  position: absolute;
120  top: 0;
121  width: 100%;
122  text-align: center;
123}
124.content h2
125{
126  position: relative;
127  display: flex;
128  justify-content: center;
129}
130.content h2 span
131{
132  position: -webkit-sticky;
133  position: sticky;
134  top:0;
135  line-height: 100vh;
136  height: 100vh;
137  color: #fff;
138  font-size: 14vw;
139  margin-top: calc(100vh * var(--i));
140}
141

Rwight

2021/05/01 21:36 編集

自分は上手く説明はできませんが何となく自分の言葉に変えたら「要素は文書の通常のフローに従って配置になっていて。(フローの意味：流れや流動という意味。) top, right, bottom, left, z-index 指定しても効果がありません。その意味が既定値です。」詳しくはここから https://developer.mozilla.org/ja/docs/Web/CSS/position つまり position: stickyはtopとか指定しても変化がなし、即定値です。この即定値とは「ユーザーが何も操作や設定を行っていない場合に使用される、あらかじめ組み込まれた初期設定のことである。」つまりユーザー(我々)がこのposition: sticky;と打てば初期に設定されていたものになると言う事です。 (もし説明が上手く伝わってなかったらすみません。。。)

ahiru3

2021/05/01 21:36

すいません。 cssの.content h2 spanの部分のtop: 0;ここのことでしょうか？

Rwight

2021/05/01 21:47 編集

自分もまだまだ勉強途中ですが、多分最初にposition: sticky;と打った後にそこで初期のものが指定されるから、top: 0; も多分ですが、自動的にposition: sticky;でしてtopも指定されていると思いますが(予想です) 本当のことはプロの人達に聞いてみてください。(自分からも宜しくお願いします。) 本当の助けにならないで申し訳ありません。m(_ _)m。 (こう言う初心者が教えられても間違いがあるかもしれませんのでこちらで書かせていただきました。)