Css 滚动时移动重叠的垂直图像

基本上，我想了解垂直滚动的效果，但重叠的图像在惊人的作品

到目前为止，我发现他们使用了一个容器

div

，其中再次包含四个

div

s，它们绝对位于容器的左上角。到目前为止，一切顺利。除此之外，这四个

div

s都具有相同的大小，其背景图像的大小与

cover

相同，并且具有不同的

z-index

值，以确保它们的顺序正确

然后，他们添加了一个

clip

样式，它总是从四个

div

s的左上角开始，总是具有相同的宽度，但它们的垂直长度不同。最上面的是最短的，第二上面的是第二短的，依此类推

到目前为止，我已经有两个问题：

• 他们如何获得

  673px

  宽度？这不是取决于屏幕分辨率吗？为什么正是这个值
• 他们是如何得到剪切矩形的高度的？究竟为什么会有这些价值观？（当然，因为否则它不会起作用，但他们是如何得到这些值的？我肯定不是通过反复试验……）

现在，除此之外，您可以看到，当您滚动时，它们所做的基本上就是更新剪切矩形的下边框。这样看起来，它们好像在向上滑动，在图像上方移动，同时保持固定

---

我不明白他们是怎么做到的。显然，它们以某种方式附加到了

窗口。滚动
事件，但具体如何呢？
它们通过
e.startEngine（）
将
类添加到
div.images
中，一旦它到达视口的上边缘，并在滚动所有图像时通过
e.stopEngine（）
将其删除。这将触发以下样式：

.focus .images.fixed {
    position: fixed;
    width: calc(50% - 30px);
}

calc（50%-30px）
可能是您正在搜索的
673px

每个图像的样式如下所示：

height: 928px;
clip: rect(0px 597px 1856px 0px);

可扩展为：

height: [window.innerHeight];
clip: rect(
    0px
    [window.innerWidth / 2 - 30]
    [
        this.parentNode.parentNode.offsetTop +
        document.querySelector('.inpagenav').offsetHeight +
        (window.innerHeight * IMAGENUMBER) - 
        window.scrollY
    ]
    0px
);

滚动事件通过
e.Tools.bindEvent（窗口，“滚动”，w）
附加，函数
w
调用
e.Tools.clipY（）
，为每个图像设置
clip
样式。
高度设置为加载时的客户端视口高度，宽度基于加载时的
图像的宽度。滚动和其他操作都是通过他们内联的js脚本完成的。我不确定他们为什么用这种方式开发它，而不是每个部分都有绝对div，并使用
后台附件：fixed。感谢您的详细回答：-）。但是我有几个问题：你说的
e.startEngine（）
和
e.stopEngine（）
是什么意思？和：什么是
e.Tools
？
e
指的是自定义对象
window。Focus
和
e.Tools
指的是
window.Focus.Tools
。
Focus
对象（即
e
）看起来像是用作命名空间来存储其中的函数。您可以查看页面的源代码并搜索
窗口。聚焦
或
e.startEngine
查看相关代码部分。