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

回答編集履歴

1

要素名などを提示内容に合わせました

2019/12/12 13:13

投稿

satoshi_tajima
satoshi_tajima

スコア337

answer CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  の定義をヘッダーに重なっているときとして、以下のような形でしょうか?
4
4
 
5
- 1. 対象のdiv(id="target")よりも上部にあるcontentsの高さを取得
5
+ 1. 対象のdiv(id="sample")よりも上部にあるcontentsの高さを取得
6
6
  2. windowのスクロール位置から1を引き算
7
7
  3. 3が0より大きければ上部にスクロールして当たっていると判断し色変更
8
8
 
@@ -15,7 +15,7 @@
15
15
  <div class="header">header</div>
16
16
  <div class="main">
17
17
  <div id="contents1" class="contents">contents</div>
18
- <div id="target">target div</div>
18
+ <div id="sample">#sample</div>
19
19
  <div id="contents2" class="contents">contents</div>
20
20
  </div>
21
21
  ```
@@ -36,13 +36,13 @@
36
36
  .contents{
37
37
  height: 800px;
38
38
  }
39
- #target {
39
+ #sample {
40
40
  height:300px;
41
41
  background: #334433;
42
42
  color: #fff;
43
43
  }
44
- .hit {
44
+ .active {
45
- background-color: #00aa00!important;
45
+ background-color: #a00!important;
46
46
  }
47
47
  ```
48
48
  ```javascript
@@ -51,9 +51,9 @@
51
51
  let targetTop = $(this).scrollTop() - $("#contents1").height();
52
52
 
53
53
  if (targetTop > 0){
54
- $("#target").addClass("hit");
54
+ $(".header").addClass("active");
55
55
  }else{
56
- $("#target").removeClass("hit");
56
+ $(".header").removeClass("active");
57
57
  }
58
58
  });
59
59
  })