如何在相对于方形空间图像块的滚动过程中修复 div

Question

我正在尝试淡入/淡出并在相对于右侧图像块滚动时修复左侧的蓝色div。

http://www.warface.co.uk/#/testing/传球：平方

.meta { /*This is the block I'm trying to stick/*
    background: blue;
    position: fixed;
    width: 372px;
    float: left;
    z-index: 3;
    right: 100%;
}

Answer 1

以下是 JavaScript 的基础知识：

function controlMeta() {
    var meta = document.querySelector("div.meta");
    console.log(meta);
    if (window.scrollY > 500) {
        meta.style.display = "none";
    } else {
        meta.style.display = "block";
    }
}
window.addEventListener("scroll", function () {
    controlMeta();
})

你可以通过这样的东西来获取你的元素滚动位置：

document.getElementById("57513a9220c6475fb77061c5").getBoundingClientRect().top+window.scrollY

编辑 1

下面是一种将元素与元框相关联的方法，基于前面：

//Load elements that affect the meta box
var meta = [];
var images = document.querySelector('.sqs-gallery').getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    meta.push({
        node : images[i],
        height : images[i].height,
        //top is used with scroll position to determine which element we are looking at
        top : images[i].getBoundingClientRect().top + window.scrollY
    });
}
function controlMeta() {
    meta.filter(function (el) {
        //You might need to pad your filter a little
        return window.scrollY < el.top && window.scrollY > el.top - el.height;
    }).forEach(function (el) {
        //These are the matching elements. I'm just fetching the src as an example
        document.querySelector("div.meta div.body").innerHTML = el.node.src;
    });
}
window.addEventListener("scroll", function () {
    controlMeta();
});