Javascript 到达时隐藏div元素传递时显示

我正在寻找的想法，隐藏一个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
        }
    });

var bottom=$（'.网格外图像'）
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>bottom）{
$（'.share icons'）.fadeOut（200）；//达到并重叠时隐藏共享图标
}
如果（$（this.scrollTop（）

我无法生成JSFIDLE，因为我还没有找到与之类似的东西。有什么想法吗

编辑：

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

编辑：这里有一张图片来说明这个问题

---

您需要做的是创建一个div的

数组

，该数组要触发隐藏效果，然后计算它们的边框，然后对它们执行碰撞检测

这里是一个非常粗略的示例-您必须修复显示和隐藏，因为这将导致每个滚动事件上的淡入淡出

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

constShareIcons=$（'.shareIcons'）；
常量divs=$（'.trigger div'）；
const rects=[]；
每个分区（函数（）{
rects.push（this.getBoundingClientRect（））；
});
$（窗口）。滚动（函数（）{
让interectsAny=false；
forEach（函数（rect）{
if（intersectRect（rect，shareIcons[0].getBoundingClientRect（））{
interectsAny=true；
}
});
if（interectsAny）{
共享图标淡出（200）；
}否则{
fadeIn（200）；
}
});
// https://stackoverflow.com/questions/2752349/fast-rectangle-to-rectangle-intersection
函数intersectRect（r1，r2）{
返回！（r2.左>r1.右| |
r2.右r1.底部||
r2.底部

您要做的是创建一个div的

数组

，用于触发隐藏效果，然后计算它们的边框，然后对它们执行碰撞检测

这里是一个非常粗略的示例-您必须修复显示和隐藏，因为这将导致每个滚动事件上的淡入淡出

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

constShareIcons=$（'.shareIcons'）；
常量divs=$（'.trigger div'）；
const rects=[]；
每个分区（函数（）{
rects.push（this.getBoundingClientRect（））；
});
$（窗口）。滚动（函数（）{
让interectsAny=false；
forEach（函数（rect）{
if（intersectRect（rect，shareIcons[0].getBoundingClientRect（））{
interectsAny=true；
}
});
if（interectsAny）{
共享图标淡出（200）；
}否则{
fadeIn（200）；
}
});
// https://stackoverflow.com/questions/2752349/fast-rectangle-to-rectangle-intersection
函数intersectRect（r1，r2）{
返回！（r2.左>r1.右| |
r2.右r1.底部||
r2.底部

其他

是固定的吗？我编辑了我的姿势

如果（$（this）.scrollTop（）>bottom.offset（）.top）.

其他

是固定的吗？我编辑了我的姿势
如果（$（this）.scrollTop（）>bottom.offset（）.top）.