JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pkg-situation-item ui-animation" data-scroller style="height: 1000px;">
					<img src="./img/A_03.png" class="pkg-situation-item-icon" />
					<span class="pkg-situation-item-text">123456</span>
</div>
<div class="pkg-situation-item ui-animation" data-scroller style="height: 1000px;">
					<img src="./img/A_03.png" class="pkg-situation-item-icon" />
					<span class="pkg-situation-item-text">123456</span>
</div>

CSS

.is-active { color: #f00; transition: color 3s; }

JavaScript

addActive = function() {
    var $scroller = document.querySelectorAll('[data-scroller]'),
        win_hei, scr_top, obj_hei, event_point, cls, con, $obj, i, l;        

    if(!$scroller.length) { return; }
    win_hei   = document.documentElement.clientHeight;
    scr_top   = window.pageYOffset;

    i = 0; l = $scroller.length;
    for(i; i<l; i++) {
      $obj = $scroller[i];
      event_point = $obj.offsetTop;
      obj_hei = $obj.offsetHeight;

      if( document.documentElement.clientWidth > 1200) {
        // 桌機板: 物件高度在畫面上或下緣中達 1/3 個螢幕
        con = (((win_hei+scr_top)-(win_hei/5)) >= event_point) && ( (event_point + obj_hei - (win_hei/5)) >= scr_top );
      } else {
        // 手機板: 物件在一個螢幕外高度外的距離觸發
        con = ((win_hei+scr_top) + win_hei >= event_point) && ((event_point+obj_hei) + win_hei >= scr_top);
      }

      if( con ) {
        cls = $scroller[i].className.split(' ');
        cls.push('is-active');
        $scroller[i].className = cls.join(' ');
        $scroller[i].removeAttribute('data-scroller');
      }
    }
  };
  
 
  window.addEventListener('scroll', addActive);