繰り返す特定要素の表示・非表示を条件に、classの付与・削除を行いたい

Question

特定の要素（何度もでてくる）が画面に表示されている間はclassをつけ、表示されなくなったらclassを削除するようにしたいです。

具体的には
背景が黒のときは、fixedしたタイトルを白に、
背景が白のときは、タイトルを黒にしたいです。

黒背景が表示されているときは、タイトルからclassを取り、
白背景が表示されているときに、タイトルにclassをつけようと考えました。

<div class="container">
<p class="title">タイトル</p>
　<div class="content01">
　　<div class="bg_black">
　　　<!-- 黒背景・略 -->
　　</div>
　　<div class="bg_white">
　　　<!-- 白背景・略 -->
　　</div>
　</div><!-- /content01 -->

　<div class="content02">
　　<div class="bg_black">
　　　<!-- 黒背景・略 -->
　　</div>
　　<div class="bg_white">
　　　<!-- 白背景・略 -->
　　</div>
　</div><!-- /content02 -->
</div>

.container{positoin:relative; color:#fff;}
.title {position:fixed; left:0; top:0; color:#fff;}
.bg_black {background: #000;}
.bg_white {background: #fff;}
.is_black {color: #000 !important;}

下記のサイトを参考にしましたが、bg_blackとbg_whiteが1つづつしかない場合はうまくいったのですが、
複数あると、一番最後のbg_whiteが表示されたときにしか、is_blackのclassが付与されませんでした。

https://into-the-program.com/scroll-disp-elem/

$(window).on('scroll', function (){

  var bgWhite = $('.bg_white');
  var isBlack = 'is_black';
  
  bgWhite.each(function () {
    var elemOffset = $(this).offset().top;
    var scrollPos = $(window).scrollTop();
    if(scrollPos > elemOffset){
      $('.title').addClass(isBlack);
    }else {
      $('.title').removeClass(isBlack);
    }
  });
});

繰り返す要素に対してはどのように対応したら良いでしょうか？
当方、プログラム系は初心者のため、うまく伝えられなくて申し訳ありませんが
ご教示いただけますと幸いです。
よろしくお願いいたします。

Answer 1

別解を。
document.elementFromPoint() で指定位置の要素を取得できます。

.title {
  pointer-events: none;
}

  var element = document.elementFromPoint(32, 10);
  if (!element) {
    return true;
  }

  $('.title').toggleClass(isBlack, !!$(element).closest('.bg_white').length);

https://developer.mozilla.org/ja/docs/Web/API/Document/elementFromPoint

mix-blend-mode もありますが実際に試してみるとズレが見られるなど、こちらは実装にやや難がありそうです。

.title {
  color: #fff;
  mix-blend-mode: difference;
}

https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode

Answer 2

教えていただいた考え方をもとに、waypoints.jsを使って解決しました。
つたないコードでお恥ずかしいのですが、もしかしたらなにかのお役に立つかもと思いましたので
載せておきます

var $black01 = $('.content01 .bg_black');
var title = $('.title');
$black01.waypoint(function(direction) {
  if (direction === 'down') {
  title.removeClass('is_black');
  }
	}, {
  offset: '0%'
});
$black01.waypoint(function(direction) {
  if (direction === 'up') {
   title.removeClass('is_black');
  }
}, {
  offset: '100%'
});

var $white01 = $('.content01 .bg_white');
$white01.waypoint(function(direction) {
  if (direction === 'down') {
  title.addClass('is_black');
  }else{
  title.removeClass('is_black');
		}
}, {
  offset: '0%'
});

var $black02 = $('.content02 .bg_black');
var title = $('.title');
$black02 .waypoint(function(direction) {
  if (direction === 'down') {
  title.removeClass('is_black');
  }else{
title.addClass('is_black');
}
	}, {
  offset: '0%'
});

var $white02 = $('.content02 .bg_white');
$white02.waypoint(function(direction) {
  if (direction === 'down') {
  title.addClass('is_black');
  }else{
  title.removeClass('is_black');
}
}, {
  offset: '0%'
});

Comments

[yMarch]

はちゃめちゃなコードだと思うので、もしアドバイスがあったらいただけると大変助かります！

Answer 3

「画面に表示されている間」ということは、提示のif文では足りません。画面に入る前、画面内、画面より下で処理を分けて、クラスを付け外しするのは「画面内」のみにする必要があります。（画面外にいる要素が付け外しをすると画面内の状況と関係の無いclassがつくことになるので）

「inview js」で検索するか、ターゲットブラウザが最近のものなら Intersection Observer API を利用するのが確実だと思います。

【Intersection Observer API - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

【IntersectionObserverで要素が画面内に入ってきたかを判定する】
https://sbfl.net/blog/2017/07/04/javascript-intersection-observer/

【Intersection Observer が良さそうなので試してみた - Qiita】
https://qiita.com/yamanoku/items/027308e23cfc69845d7e

Comments

[yMarch]

ありがとうございます！！
IE11も対象のため、「Intersection Observer API」が使えず、
また、inview.jsは、仕様が変わったようで、「要素が画面上部にきたら」という設定が出来なくなっていました。
（言葉足らずですみません。タイトルは画面上部にfixedなので、要素が画面上部にきたらclassをつける仕様にしたかったです。）

ただ、kei344様のおかげで、考え方がいろいろとスッキリしました！！！
ありがとうございます！
waypoint.jsを使って無理やり頑張ってみました！

もっとスマートな書き方があると思うのですが、いかんせん初心者で・・・お恥ずかしい。