回答編集履歴

3

コードにコメント追加

2020/10/17 14:55

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -80,7 +80,7 @@
80
80
 
81
81
  position: relative;
82
82
 
83
- z-index: 1;
83
+ z-index: 1; /* .pageendより前面に配置 */
84
84
 
85
85
  background-color: #fff;
86
86
 
@@ -110,7 +110,7 @@
110
110
 
111
111
  .pageend {
112
112
 
113
- z-index: 0;
113
+ z-index: 0; /* .scrollcontentsより背面に配置 */
114
114
 
115
115
  height: 480px
116
116
 

2

サンプルリンク追加

2020/10/17 14:55

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -183,3 +183,7 @@
183
183
  }
184
184
 
185
185
  ```
186
+
187
+
188
+
189
+ [CodePenサンプル](https://codepen.io/hatena19/pen/GRqZPpW)

1

コード追記

2020/10/17 14:09

投稿

hatena19
hatena19

スコア34075

test CHANGED
@@ -17,3 +17,169 @@
17
17
 
18
18
 
19
19
  [【jQuery】パララックスデザインの作り方 - 株式会社ネディア │ネットワークの明日を創る。](https://www.nedia.ne.jp/blog/tech/2016/04/19/7248)
20
+
21
+
22
+
23
+
24
+
25
+ ---
26
+
27
+ [リンク先](https://rinn.co.jp/)のページの最後までスクロールしたときに、ページエンドに固定したブロック(MADE FOR CATS,DESIGNED FOR YOU.の部分)が現れるサンプル。
28
+
29
+
30
+
31
+ コメントで軽く解説しておきましたので参考にしてください。
32
+
33
+
34
+
35
+ ```html
36
+
37
+ <div class="scrollcontents">
38
+
39
+ <div class="contents">
40
+
41
+ <h1>下にスクロールしてください。</h1>
42
+
43
+ </div>
44
+
45
+ </div>
46
+
47
+
48
+
49
+ <div class="pageend">
50
+
51
+ <div class="pageend-body">
52
+
53
+ <div class="pageend-inner">
54
+
55
+ <p>Made for Cats,<br>Designed for You.</p>
56
+
57
+ </div>
58
+
59
+ </div>
60
+
61
+ </div>
62
+
63
+ ```
64
+
65
+
66
+
67
+ ```css
68
+
69
+ * {
70
+
71
+ outline: none;
72
+
73
+ box-sizing: border-box;
74
+
75
+ margin: 0;
76
+
77
+ }
78
+
79
+ .scrollcontents {
80
+
81
+ position: relative;
82
+
83
+ z-index: 1;
84
+
85
+ background-color: #fff;
86
+
87
+ width: 100%;
88
+
89
+ }
90
+
91
+ .contents {
92
+
93
+ /* スクロールさせるために適当に高さを設定
94
+
95
+   本来はいろいろコンテンツが入ります。 */
96
+
97
+ overflow: hidden;
98
+
99
+ height: 3000px;
100
+
101
+ }
102
+
103
+ .contents h1 {
104
+
105
+ margin-top: 100px;
106
+
107
+ }
108
+
109
+
110
+
111
+ .pageend {
112
+
113
+ z-index: 0;
114
+
115
+ height: 480px
116
+
117
+ }
118
+
119
+
120
+
121
+ .pageend-body {
122
+
123
+ /* ページエンドブロックを画面サイズと同じにして
124
+
125
+   画面に固定表示 */
126
+
127
+ position: fixed;
128
+
129
+ left: 0;
130
+
131
+ bottom: 0;
132
+
133
+ width: 100%;
134
+
135
+ overflow: hidden;
136
+
137
+ height: 100vh;
138
+
139
+ background: #222;
140
+
141
+ color: #fff;
142
+
143
+ display: flex;
144
+
145
+ align-items: flex-end; /* 子要素を下揃え */
146
+
147
+ }
148
+
149
+
150
+
151
+ .pageend-inner {
152
+
153
+ width: 100%;
154
+
155
+ height: 480px
156
+
157
+ }
158
+
159
+
160
+
161
+ .pageend-inner { /* 子要素の上下左右中央寄せ */
162
+
163
+ display: flex;
164
+
165
+ align-items: center;
166
+
167
+ justify-content: center;
168
+
169
+ text-align: center;
170
+
171
+ }
172
+
173
+
174
+
175
+ .pageend p {
176
+
177
+ letter-spacing: 3px;
178
+
179
+ font-size: 18px;
180
+
181
+ color: #fff;
182
+
183
+ }
184
+
185
+ ```