特定の要素に入ったら、クラスを追加したい

Question

htmlを構築していて、ヘッダーを固定させています。
その際に、特定の要素に入ったら、ヘッダーにクラスを追加したいです。

ヘッダーが特定の要素と重なってるときのみヘッダーにクラスを追加したいです。

jqueyを使ってできますでしょうか？
ご教授願います。

Answer 1

よく期間で重なっているかどうかの判定が行われますが、同様にします。

始点2 <= 終点1 && 始点1 <= 終点2

2つの期間が重なり合うかどうかを判定する。 - こせきの技術日記

$(window).on('scroll', function(event) {
  const head = $('#head');
  const recta = head[0].getBoundingClientRect();
  const rectb = $('#sample')[0].getBoundingClientRect();
  head.toggleClass('active', rectb.top <= recta.bottom && recta.top <= rectb.bottom && rectb.left <= recta.right && recta.left <= rectb.right);
}).trigger('scroll');

https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect

Answer 2

特定の要素に入ったら

の定義をヘッダーに重なっているときとして、以下のような形でしょうか？

1. 対象のdiv(id="sample")よりも上部にあるcontentsの高さを取得
2. windowのスクロール位置から1を引き算
3. 3が0より大きければ上部にスクロールして当たっていると判断し色変更

としています。
以下コードです

CODEPENで動かしてみてください。

<div class="header">header</div>
<div class="main">
  <div id="contents1" class="contents">contents</div>
  <div id="sample">#sample</div>
  <div id="contents2" class="contents">contents</div>
</div>

.header {
  position:fixed;
  top:0;
  left: 0;
  height: 50px;
  width: 100%;
  background-color: #333;
  color: #fff;
}
.main {
  margin-top: 50px;
  background-color: #ddd; 
}
.contents{
  height: 800px;
}
#sample {
  height:300px;
  background: #334433;
  color: #fff;
}
.active {
  background-color: #a00!important;
}

$(function(){
  $(window).scroll(function(e){
    let targetTop = $(this).scrollTop() - $("#contents1").height();

    if (targetTop > 0){
      $(".header").addClass("active");
    }else{
      $(".header").removeClass("active");
    }
  });
})