質問編集履歴

5

「■前提」に画像高さ、要素高さを追記

2020/06/14 10:49

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,9 @@
8
8
 
9
9
  ■前提
10
10
 
11
+ - 背景画像の高さは400px
12
+
11
- 背景画像の移動量調整するため、```background-attachment: fixed;```使用しない。
13
+ - 背景画像を指定する要素の高さ200px
12
14
 
13
15
 
14
16
 
@@ -114,7 +116,7 @@
114
116
 
115
117
  .bg-1 {
116
118
 
117
- height: 300px;
119
+ height: 200px;
118
120
 
119
121
  background: url("../img/bg-1.jpg") no-repeat center center/cover;
120
122
 
@@ -124,7 +126,7 @@
124
126
 
125
127
  .bg-2 {
126
128
 
127
- height: 300px;
129
+ height: 200px;
128
130
 
129
131
  background: url("../img/bg-2.jpg") no-repeat center center/cover;
130
132
 

4

文章の修正

2020/06/14 10:49

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -20,6 +20,14 @@
20
20
 
21
21
 
22
22
 
23
+ ※背景の固定...以下のページのようなスクロールしても背景画像が固定されているパララックス効果のことです。
24
+
25
+ [https://takafumimegumi.com/demo/background-attachment/index.html
26
+
27
+ ](https://takafumimegumi.com/demo/background-attachment/index.html)
28
+
29
+
30
+
23
31
  【動作の順番】
24
32
 
25
33
  0. ```.bg-1```が画面内に入ると```.bg-1```の背景画像のみが固定(```.bg-2```はまだ固定されない)

3

コードの修正

2020/06/14 10:17

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -52,53 +52,43 @@
52
52
 
53
53
  ```html
54
54
 
55
- <body>
56
-
57
- <div class="content">
55
+ <div class="content">
58
-
56
+
59
- コンテンツ
57
+ コンテンツ
60
-
58
+
61
- </div>
59
+ </div>
62
-
63
-
64
-
60
+
61
+
62
+
65
- <div class="bg-1">
63
+ <div class="bg-1">
66
-
64
+
67
- <h2>テキスト</h2>
65
+ <h2>テキスト</h2>
68
-
66
+
69
- </div>
67
+ </div>
70
-
71
-
72
-
68
+
69
+
70
+
73
- <div class="content">
71
+ <div class="content">
74
-
72
+
75
- コンテンツ
73
+ コンテンツ
76
-
74
+
77
- </div>
75
+ </div>
78
-
79
-
80
-
76
+
77
+
78
+
81
- <div class="bg-2">
79
+ <div class="bg-2">
82
-
80
+
83
- <h2>テキスト</h2>
81
+ <h2>テキスト</h2>
84
-
82
+
85
- </div>
83
+ </div>
86
-
87
-
88
-
84
+
85
+
86
+
89
- <div class="content">
87
+ <div class="content">
90
-
88
+
91
- コンテンツ
89
+ コンテンツ
92
-
90
+
93
- </div>
91
+ </div>
94
-
95
-
96
-
97
- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
98
-
99
- <script src="js/script.js"></script>
100
-
101
- </body>
102
92
 
103
93
  ```
104
94
 

2

誤字の訂正

2020/06/14 07:45

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  ■実現したいこと
16
16
 
17
- スクロール量を検知し、画面領域が下記htmlの```bg-1```と```bg-2```に入ると
17
+ スクロール量を検知し、画面領域が下記htmlの```.bg-1```と```.bg-2```に入ると
18
18
 
19
19
  ぞれぞれの背景画像を固定してスクロールを行う。
20
20
 
@@ -22,9 +22,9 @@
22
22
 
23
23
  【動作の順番】
24
24
 
25
- 0. ```bg-1```が画面内に入ると```bg-1```の背景画像のみが固定(```bg-2```はまだ固定されない)
25
+ 0. ```.bg-1```が画面内に入ると```.bg-1```の背景画像のみが固定(```.bg-2```はまだ固定されない)
26
-
26
+
27
- 0. ```bg-2```が画面内に入ると```bg-2```の背景画像のみが固定
27
+ 0. ```.bg-2```が画面内に入ると```.bg-2```の背景画像のみが固定
28
28
 
29
29
 
30
30
 
@@ -34,7 +34,7 @@
34
34
 
35
35
  現在のコードでは画面の一番上からスクロールを検知し、
36
36
 
37
- それに伴い```bg-1```と```bg-2```の背景画像が同時にスクロールを始めます。
37
+ それに伴い```.bg-1```と```.bg-2```の背景画像が同時にスクロールを始めます。
38
38
 
39
39
 
40
40
 
@@ -230,7 +230,7 @@
230
230
 
231
231
  スクロールを固定するコードの代わりに、```alert()メソッド```を入れると、
232
232
 
233
- ```bg-1```と```bg-2```の領域内に入ったときにアラートが表示されました。
233
+ ```.bg-1```と```.bg-2```の領域内に入ったときにアラートが表示されました。
234
234
 
235
235
  なので、スクロールの検知は問題なく動作していると思います
236
236
 

1

タイトルの修正

2020/06/14 07:43

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- jQueryで、画面領域に入ると背景画像を固定してスクロールをすもの作りたいで
1
+ jQuery画面領域に入ると背景画像を固定してスクロールさせ方法教えていだけないでしょうか
test CHANGED
File without changes