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

如何在相对于Squarespace图像块的滚动期间修复div？

1 个答案: