我会坚持确定 *active的 * data-id值并查询相关的.media元素，然后使用JavaScript的IntersectionObserver API（如this related answer）来检测元素何时进入或退出视口

const inViewport = (entries, observer) => {
  entries.forEach(entry => {
    // (This example is a proof of concept and might need optimization)
    const dataId = entry.target.dataset.id;  // i.e: "3a241cb2"
    const elsMedia = document.querySelectorAll(`[data-id="${dataId }"]`);
    elMedia.classList.toggle("active", entry.isIntersecting);
  });
};
const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; //See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
// Attach observer to every [data-inviewport] element:
document.querySelectorAll('.content[data-id]').forEach(el => {
  Obs.observe(el, obsOptions);
});

字符串
使用jQuery
以及使用inViewport micro jQuery plugin，其提供对指定元素集合的回调，其中参数px是每个 * 相交 *（视口内）元素的可见高度的整数值：

/**
 * inViewport jQuery plugin by Roko C.B.
 * http://stackoverflow.com/a/26831113/383904
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el) {
       function visPx(){
         var elH = $(el).outerHeight(),
             H = $(win).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H)));  
       }
       visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));
// Use like:
$(".content[data-id]").inViewport(function(px) {
  // `px` represents the amount of visible height
  if (px > 0) {
    // Is in viewport logic goes here
    const dataId = $(this).data("id");   // i.e: "3a241cb2"
    $(".media").removeClass("active");
    $(`.media[data-id="${dataId}"]`).addClass("active");
  } else {
    // Not in viewport logic goes here
  }
});

型