如果在视窗中有相同的数据属性值，则jQuery添加类

我将坚持确定active'sdata-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);
});

Using jQuery,
and using the inViewport micro jQuery plugin which provides a callback to the designated elements collection with an argument px being the integer value of the visible height of each intersecting (in-viewport) element:

/**
 * 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
  }
});