teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問背景を固定にしたまま指定された要素をスクロールさせたいです。

編集履歴

質問編集履歴

5

解決しました！！！！！！！

2021/01/15 09:50

投稿

nomura02
nomura02

スコア133

test CHANGED
File without changes
test CHANGED
@@ -333,3 +333,187 @@
333
333
  お忙しいところ恐縮ですが、何かヒントを頂けましたら幸いです。
334
334
 
335
335
  宜しくお願いいたします。
336
+
337
+
338
+
339
+
340
+
341
+ ---
342
+
343
+ 解決した方法
344
+
345
+ ---
346
+
347
+ ご回答頂いた、「background-attachment: fixed;」を用いて、
348
+
349
+ さらに「position: sticky;」を当てたところ、自分の理想通りになりました！！！！
350
+
351
+ ありがとうございます！！！こちら実際のコードです。
352
+
353
+ ```HTML
354
+
355
+ <section class="introduction"> ←ここの背景をbackground-attachment: fixed;
356
+
357
+ <div class="introduction-content">
358
+
359
+ <div class="title"> ←ここに上下のpaddingで可視範囲を設定
360
+
361
+ <h1>COMMITMENT</h1>
362
+
363
+ <p class="subtitle">3 special points</p>
364
+
365
+ </div>
366
+
367
+
368
+
369
+ <div class="introduction-writing"> ←ここがstiky、高さも指定
370
+
371
+ <h2>お客様に喜んで頂ける家具を<br>
372
+
373
+ お届けするために。</h2>
374
+
375
+
376
+
377
+ <p>ご購入頂きご自宅に届いたその瞬間から、家具とお客様の生活が始まります。<br>
378
+
379
+ お客様との大切な時間を共に過ごす物だからこそ、輸入から、お客様のご自宅にお届けし、家具がお客様のご自宅の一部になり、快適に使って頂けるまでが、私達の仕事です。</p>
380
+
381
+ </div>
382
+
383
+ <span class="scroll">SCROLL</span>
384
+
385
+ </div>
386
+
387
+ </section>
388
+
389
+ ```
390
+
391
+ ```CSS
392
+
393
+ .introduction {
394
+
395
+ background-image: url(../img/back_commitment.jpg);
396
+
397
+ background-size: contain;
398
+
399
+ background-repeat: no-repeat;
400
+
401
+ background-attachment: fixed;
402
+
403
+ }
404
+
405
+
406
+
407
+ .introduction-content {
408
+
409
+ width: 50%;
410
+
411
+ }
412
+
413
+
414
+
415
+ .introduction-content .title {
416
+
417
+ padding: 30% 0;
418
+
419
+ }
420
+
421
+
422
+
423
+ .introduction-writing {
424
+
425
+ padding: 0 10%;
426
+
427
+ height: 150vh;
428
+
429
+ position: -webkit-sticky;
430
+
431
+ position: sticky;
432
+
433
+ top: 0;
434
+
435
+ left: 0;
436
+
437
+ }
438
+
439
+
440
+
441
+ .introduction h1 {
442
+
443
+ font-size: 7.42188vw;
444
+
445
+ font-family: "din-1451-lt-pro-engschrift", sans-serif;
446
+
447
+ font-style: normal;
448
+
449
+ font-weight: 400;
450
+
451
+ color: #eae2db;
452
+
453
+ line-height: 1.75em;
454
+
455
+ text-align: center;
456
+
457
+ }
458
+
459
+
460
+
461
+ .introduction .subtitle {
462
+
463
+ font-size: 30px;
464
+
465
+ font-family: "din-1451-lt-pro-engschrift", sans-serif;
466
+
467
+ font-style: normal;
468
+
469
+ font-weight: 400;
470
+
471
+ color: #eae2db;
472
+
473
+ line-height: 1.75em;
474
+
475
+ text-align: center;
476
+
477
+ margin-top: -7%;
478
+
479
+ }
480
+
481
+
482
+
483
+ .introduction h2 {
484
+
485
+ font-size: 26px;
486
+
487
+ font-family: "ryo-gothic-plusn", sans-serif;
488
+
489
+ font-style: normal;
490
+
491
+ font-weight: 700;
492
+
493
+ color: #eae2db;
494
+
495
+ line-height: 1.75em;
496
+
497
+ }
498
+
499
+
500
+
501
+ .introduction .scroll {
502
+
503
+ font-size: 20px;
504
+
505
+ font-family: "din-1451-lt-pro-engschrift", sans-serif;
506
+
507
+ font-style: normal;
508
+
509
+ font-weight: 400;
510
+
511
+ color: #eae2db;
512
+
513
+ line-height: 1.75em;
514
+
515
+ }
516
+
517
+ ```
518
+
519
+ 本当にありがとうございます！！！！！！！！！

4

イメージ説明について、補足させて頂きました。

2021/01/15 09:50

投稿

nomura02
nomura02

スコア133

test CHANGED
File without changes
test CHANGED
@@ -2,9 +2,7 @@
2
2
 
3
3
  下記のように、背景を固定にしたまま、文章のスクロールが終わったら、次のセクションへスクロールできるようにしたいです。
4
4
 
5
-
6
-
7
- ![実現したいこと](ce5fa1d5ae2aad954ffe264d01909125.jpeg)
5
+ ![イメージ説明](b7d998d40d5104b474300e15e23ce966.jpeg)
8
6
 
9
7
 
10
8
 

3

補足事項を付け足しました。

2021/01/15 09:03

投稿

nomura02
nomura02

スコア133

test CHANGED
File without changes
test CHANGED
@@ -24,6 +24,8 @@
24
24
 
25
25
  ### 試したこと
26
26
 
27
+ ↓こちらのコードは、参考にさせて頂いているコードを抜粋して、試しに今作っているものです。
28
+
27
29
  ```HTML
28
30
 
29
31
  <!DOCTYPE html>

2

内容を具体的に致しました。

2021/01/15 08:56

投稿

nomura02
nomura02

スコア133

test CHANGED
File without changes
test CHANGED
@@ -8,6 +8,10 @@
8
8
 
9
9
 
10
10
 
11
+ overflow: hidden と positon: sticky を両立するといったことはできない
12
+
13
+ ということを知ったので、
14
+
11
15
  position: sticky;
12
16
 
13
17
  と、
@@ -318,12 +322,12 @@
318
322
 
319
323
  ### お聞きしたいこと
320
324
 
325
+ 0. 上記のような考え方で合っている場合、clip-pathで切り取るところまでは、合っていますでしょうか。
326
+
321
327
  0. そもそも、CSSでの実装は難しいでしょうか。
322
328
 
323
329
  0. このような、プラグインを用いたほうが、現実的でしょうか。([プラグイン例](https://locomotivemtl.github.io/locomotive-scroll/#fixed-elements)）
324
330
 
325
- 0. 上記のような考え方で合っている場合、clip-pathで切り取るところまでは、合っていますでしょうか。
326
-
327
331
 
328
332
 
329
333
  お忙しいところ恐縮ですが、何かヒントを頂けましたら幸いです。

1

内容を変更しました。

2021/01/15 08:40

投稿

nomura02
nomura02

スコア133

test CHANGED
@@ -1 +1 @@
1
- 背景固定のまま、画面内スクロールをする方法にどのようなものがあるかが知りたいです
1
+ 背景を固定にしたまま指定された要素をスクロールさせたいです。
test CHANGED
@@ -8,38 +8,324 @@
8
8
 
9
9
 
10
10
 
11
+ position: sticky;
12
+
13
+ と、
14
+
15
+ clip-pathで四角く切り取れば、
16
+
11
- 初心者なもので、どういった検索の方法をしたら出てくるか分からず、考え方のヒントを頂きたく質問させて頂きました。
17
+ 上記のようなかたちになるかと思ったのですが、うまくいっておりません。
18
+
19
+
20
+
21
+ ### 試したこと
22
+
23
+ ```HTML
24
+
25
+ <!DOCTYPE html>
26
+
27
+ <html lang="en">
28
+
29
+ <head>
30
+
31
+ <meta charset="UTF-8">
32
+
33
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
34
+
35
+ <link rel="stylesheet" type="text/css" href="style.css">
36
+
37
+
38
+
39
+ <title>Document</title>
40
+
41
+ </head>
42
+
43
+ <body>
44
+
45
+ <div class="body">
46
+
47
+ <div class="content">
48
+
49
+ <div class="wrapper">
50
+
51
+ <div class="sticky"></div>
52
+
53
+ <div class="moji">
54
+
55
+ <p>moji</p>
56
+
57
+ <p>moji</p>
58
+
59
+ <p>moji</p>
60
+
61
+ <p>moji</p>
62
+
63
+ <p>moji</p>
64
+
65
+ <p>moji</p>
66
+
67
+ <p>moji</p>
68
+
69
+ <p>moji</p>
70
+
71
+ <p>moji</p>
72
+
73
+ <p>moji</p>
74
+
75
+ <p>moji</p>
76
+
77
+ <p>moji</p>
78
+
79
+ <p>moji</p>
80
+
81
+ <p>moji</p>
82
+
83
+ <p>moji</p>
84
+
85
+ <p>moji</p>
86
+
87
+ <p>moji</p>
88
+
89
+ <p>moji</p>
90
+
91
+ <p>moji</p>
92
+
93
+ <p>moji</p>
94
+
95
+ <p>moji</p>
96
+
97
+ <p>moji</p>
98
+
99
+ <p>moji</p>
100
+
101
+ <p>moji</p>
102
+
103
+ <p>moji</p>
104
+
105
+ <p>moji</p>
106
+
107
+ <p>moji</p>
108
+
109
+ <p>moji</p>
110
+
111
+ <p>moji</p>
112
+
113
+ <p>moji</p>
114
+
115
+ <p>moji</p>
116
+
117
+ <p>moji</p>
118
+
119
+ <p>moji</p>
120
+
121
+ <p>moji</p>
122
+
123
+ <p>moji</p>
124
+
125
+ <p>moji</p>
126
+
127
+ <p>moji</p>
128
+
129
+ <p>moji</p>
130
+
131
+ <p>moji</p>
132
+
133
+ <p>moji</p>
134
+
135
+ <p>moji</p>
136
+
137
+ <p>moji</p>
138
+
139
+ <p>moji</p>
140
+
141
+ <p>moji</p>
142
+
143
+ <p>moji</p>
144
+
145
+ <p>moji</p>
146
+
147
+ <p>moji</p>
148
+
149
+ <p>moji</p>
150
+
151
+ <p>moji</p>
152
+
153
+ <p>moji</p>
154
+
155
+ <p>moji</p>
156
+
157
+ <p>moji</p>
158
+
159
+ <p>moji</p>
160
+
161
+ <p>moji</p>
162
+
163
+ <p>moji</p>
164
+
165
+ <p>moji</p>
166
+
167
+ <p>moji</p>
168
+
169
+ <p>moji</p>
170
+
171
+ <p>moji</p>
172
+
173
+ <p>moji</p>
174
+
175
+ <p>moji</p>
176
+
177
+ <p>moji</p>
178
+
179
+ <p>moji</p>
180
+
181
+ <p>moji</p>
182
+
183
+ <p>moji</p>
184
+
185
+ <p>moji</p>
186
+
187
+ <p>moji</p>
188
+
189
+ <p>moji</p>
190
+
191
+ <p>moji</p>
192
+
193
+ <p>moji</p>
194
+
195
+ <p>moji</p>
196
+
197
+ <p>moji</p>
198
+
199
+ <p>moji</p>
200
+
201
+ <p>moji</p>
202
+
203
+ <p>moji</p>
204
+
205
+ <p>moji</p>
206
+
207
+ <p>moji</p>
208
+
209
+ <p>moji</p>
210
+
211
+ <p>moji</p>
212
+
213
+ <p>moji</p>
214
+
215
+ <p>moji</p>
216
+
217
+ <p>moji</p>
218
+
219
+ <p>moji</p>
220
+
221
+ <p>moji</p>
222
+
223
+ </div>
224
+
225
+ </div>
226
+
227
+ </div>
228
+
229
+ </div>
230
+
231
+
232
+
233
+ <div class="tugi"><p>次の要素</p></div>
234
+
235
+ </body>
236
+
237
+ </html>
238
+
239
+ ```
12
240
 
13
241
 
14
242
 
15
243
  ```CSS
16
244
 
17
- .introduction{
245
+ .body {
18
-
19
- background-image: url(../img/back_commitment.jpg);
246
+
20
-
21
- background-size: contain;
22
-
23
- background-repeat: no-repeat;
24
-
25
- background-attachment: fixed;
247
+ height: 400vh;
26
-
248
+
27
- }
249
+ }
250
+
251
+
252
+
253
+ .content{
254
+
255
+ position: relative;
256
+
257
+ }
258
+
259
+
260
+
261
+ .moji{
262
+
263
+ position: absolute;
264
+
265
+ top: 0;
266
+
267
+ left: 0;
268
+
269
+ }
270
+
271
+
272
+
273
+ .wrapper {
274
+
275
+ background-color: #ccc;
276
+
277
+ height: 100vh;
278
+
279
+ width: 100vw;
280
+
281
+ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
282
+
283
+ }
284
+
285
+
286
+
287
+ .sticky {
288
+
289
+ background-color: #009688;
290
+
291
+ width: 100vw;
292
+
293
+ height: 80vh;
294
+
295
+ position: -webkit-sticky;
296
+
297
+ position: sticky;
298
+
299
+ top: 0;
300
+
301
+ right: 0;
302
+
303
+ }
304
+
305
+
306
+
307
+ .tugi{
308
+
309
+ background-color: #ff9;
310
+
311
+ height: 100px;
312
+
313
+ }
28
314
 
29
315
  ```
30
316
 
31
317
 
32
318
 
33
- ### 試したこと
319
+ ### お聞きしたいこと
34
-
35
-
36
-
320
+
37
- ここに問題に対して試したことを記載してください。
321
+ 0. そもそも、CSSでの実装は難しいでしょうか。
322
+
38
-
323
+ 0. このような、プラグインを用いたほうが、現実的でしょうか。([プラグイン例](https://locomotivemtl.github.io/locomotive-scroll/#fixed-elements)）
324
+
39
-
325
+ 0. 上記のような考え方で合っている場合、clip-pathで切り取るところまでは、合っていますでしょうか。
40
-
326
+
327
+
328
+
41
- ### 補足情報（FW/ツールのバージョンなど）
329
+ お忙しいところ恐縮ですが、何かヒントを頂けましたら幸いです。
42
-
43
-
44
-
330
+
45
- ここにより詳細な情報を記載してください。
331
+ 宜しくお願いいたします。