【jQuery】ページのスクロールで背景色を変える。

やりたいこと

特定の範囲内でページがスクロールされている時だけ背景色を変えたい。

完成形

1. HTMLの準備

sample.html

<div class="title">
 Works
</div>
<div class="color-man">  ⬅️背景色を変えるところ
  <img src="img/ruby.png" class="ruby-image">
  <img src="img/ruby.png" class="ruby-image">
</div>  

2. CSSの準備

適当に横並びにして、幅と高さを与えておきます。

sample.css

  .color-man {
    margin: 0 auto;
    border-radius: 10px;
    padding: 20px;
    width: 900px;
    height: 300px;
    display: flex;
    justify-content: space-between;
  }
  
  .ruby-image {
    width: 300px;
    cursor: pointer;
  }

3. JSの準備

スクロール量を取得し、その量によって背景色を変える記述と戻す記述をする。

sample.js

window.onscroll = function(){
  var scrollTop = window.pageYOffset ;   //スクロール量を取得
  if (scrollTop > 900 ) { 　　
    $('.color-man').css('background-color', 'skyblue');
    $('.color-man').css('transition', '1.3s')
  }
  if (scrollTop < 1400 ) { 
    $('.color-man').css('background-color', '');
    $('.color-man').css('transition', '1.0s')
  }
}

---

以上で終了です。
ご覧いただきありがとうございました。