teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

イメージ画像追加

2017/06/22 08:26

投稿

groco
groco

スコア20

title CHANGED
File without changes
body CHANGED
@@ -4,12 +4,13 @@
4
4
  (要素A、要素B、要素Cの高さはそれぞれ異なります)
5
5
 
6
6
  1)要素Bはヘッダーにくっついていないので赤色背景もスクロールについてくる
7
- ![ページイメージ1](14906182aabd061e431bb3ff3a7a01c0.png)
7
+ ![ページイメージ1](cc5ed5b0c1dad708c75155e84a8a18d9.png)
8
8
 
9
9
  2)要素Bがヘッダーにくっついたので赤色背景はスクロールについてこなくなる(位置が固定される)
10
- ![ページイメージ2](9563809af05a56a55461cf5e879c6b76.png)
10
+ ![ページイメージ2](3947010a3f35a4b80b094b8f6fbbc446.png)
11
11
 
12
12
  3)スクロールを続けると要素Bの赤背景が固定されたまま要素Cが要素Bの赤背景の上を通り過ぎる
13
+ ![ページイメージ3](bef283bf3f0fd8c994f92f647890c575.png)
13
14
 
14
15
  background-attachment:fixed がスマホでは使えないようなので、
15
16
  HTMLにimgで画像を入れて背景画像のように見せながらヘッダーにくっついたらクラス名「fixed」を追加して「position:relative;」を「position:fixed;」に変更する

1

わかりにくい画像を削除

2017/06/22 08:26

投稿

groco
groco

スコア20

title CHANGED
File without changes
body CHANGED
@@ -9,8 +9,7 @@
9
9
  2)要素Bがヘッダーにくっついたので赤色背景はスクロールについてこなくなる(位置が固定される)
10
10
  ![ページイメージ2](9563809af05a56a55461cf5e879c6b76.png)
11
11
 
12
- 3)要素Bの赤背景が固定されたまま要素Cが要素Bの赤背景の上を通り過ぎる
12
+ 3)スクロールを続けると要素Bの赤背景が固定されたまま要素Cが要素Bの赤背景の上を通り過ぎる
13
- ![ページイメージ3](a0302912dc51cd88d6f410a6be1ad7b5.png)
14
13
 
15
14
  background-attachment:fixed がスマホでは使えないようなので、
16
15
  HTMLにimgで画像を入れて背景画像のように見せながらヘッダーにくっついたらクラス名「fixed」を追加して「position:relative;」を「position:fixed;」に変更する