當到達元素時隱藏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);
}