传递时到达元素时隐藏div

Question

我正在寻找想法，当它到达另一个div时隐藏div并在它通过相同的div时再次显示它。也可以有多个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

你想要做的是你想要触发隐藏效果的Array个div，然后计算它们的边界矩形，然后对它们进行碰撞检测。

这是一个非常粗略的例子 - 您必须修复显示和隐藏，因为这会在每个滚动事件上导致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);
}