如何使 div 中的图像在滚动时折叠？

Question

我试图反映此人在其网站上的“项目”部分（https://www.sophiewestfall.com/）下的内容，当您滚动时，与该项目相关的图像会“向上滚动并隐藏起来”，然后您就只剩下项目标题了。我不想让我的部分占据整个视口，而是希望将其限制在一个容器中，当您滚动浏览网站时，主容器 div 会暂停，直到所有图像都折叠起来，只剩下标题。我对编码还是新手，我认为我需要使用 javascript 来完成此任务，我只是不知道如何处理此问题。

这是我的 HTML 和 CSS 笔：https://codepen.io/sabrina-herrera/pen/Vwgejqd 我希望 .projectscontainers div 在完全展开时像这样

.projectscontainer {
    border: solid 2px #593832;
    width: 988px;
    height: 498px;
}

就像这样，当向上滚动并且图像折叠时（标题为 91px）

.projectscontainer {
    border: solid 2px #593832;
    width: 988px;
    height: 91px;
}

Answer 1

当元素到达页面顶部时，需要将position属性设置为fixed。 这是您可以使用的问题和答案 - 如何让 div 在滚动到屏幕顶部后粘在屏幕顶部？