当到达元素时隐藏div通过时显示

Question

我正在寻找想法来隐藏一个股利，当它到达另一个股利，并再次显示它通过相同的股利。 也可以有多个div传递。 就像是：

 var bottom = $('.out-of-grid-images')

 $(window).scroll(function(){    
        if ($(this).scrollTop() > bottom){ 
            $('.share-icons').fadeOut(200); // hide share icons when reached and overlaps
        }
        else if ($(this).scrollTop() < bottom){ {
            $('.share-icons').fadeIn(200); // show icons when passed element
        }
    });

我无法产生jsFiddle，因为我没有发现任何类似的东西。 有任何想法吗？

编辑：

共享图标是固定位置元素。 到达的元素是动态的，不是从页面顶部固定的（它们是将内容图像发布到网格之外）

编辑：这是一张说明问题的图片

Answer 1

您需要做的是拥有一个div Array ，您要触发其隐藏效果，然后计算其边界矩形，然后对其进行碰撞检测。

这是一个非常粗糙的示例-您必须修复显示和隐藏问题，因为这将在每个滚动事件上导致fadeIn / fadeOut。

const shareIcons = $('.share-icons');
const divs = $('.trigger-div');
const rects = [];

divs.each(function () {
    rects.push(this.getBoundingClientRect());
});

$(window).scroll(function () {
    let interectsAny = false;
    rects.forEach(function (rect) {
        if (intersectRect(rect, shareIcons[0].getBoundingClientRect())) {
            interectsAny = true;
        }
    });
    if (interectsAny) {
        shareIcons.fadeOut(200);
    } else {
        shareIcons.fadeIn(200);
    }
});

// https://stackoverflow.com/questions/2752349/fast-rectangle-to-rectangle-intersection
function intersectRect(r1, r2) {
  return !(r2.left > r1.right || 
           r2.right < r1.left || 
           r2.top > r1.bottom ||
           r2.bottom < r1.top);
}