Javascript 单div视差效应

我真的不认为视差是最好的词来描述我正在努力实现的目标，但我不知道如何用其他词来形容它

基本上，我有一个固定的页眉部分，它允许页面的其余部分滑到它上面，并按预期工作

但是，我希望有一个类似于中间的部分。

我试图实现的事件顺序：

-用户位于页面顶部，页眉完全可见

-用户向下滚动，页面内容滑过页眉顶部

-一旦用户有了一个接近页面顶部的层，就让这个层保持在固定的位置

-用户继续向下滚动页面，B层（页面的其余部分）继续在A层上滑动（可能只剩下75像素左右的div） 可见）

我还创建了一个与此相关的图像

我尝试过使用transform使用固定相对定位，但这并不完全有效。理想情况下，我希望使用纯CSS来实现这一点，但我并不反对使用jQuery

提前感谢您的帮助

编辑2：我已经达到了我的效果…可能是我想得太多了。这是一个非常棘手的问题，我相信有更好的方法来处理它，但我用以下方法来解决：

$(window).scroll(function() {

if ($(".nav_bar").offset().top > 1057) {
    $(".fixedsection_wrapper").addClass("fixedposition"); }
else {
    $(".fixedsection_wrapper").removeClass("fixedposition");
}
});

---

所做的只是放置位置：当它与导航条接触时，固定在“层A”上。然后，它的行为如图所示。

有许多视差脚本，我在各种项目中使用过。我花了很长时间让他们按照我希望的方式工作，所以最好是用你的脚本或其他人的脚本进行实验

通常，它们会查看父对象，然后代码会使父对象和两个子div层之间的距离发生变化

例如：

父母A拥有孩子B、C、D。 你希望视差发生在“C”上。 B和D之间的距离需要更改以模拟这种效果，通常是在滚动时向上平移C的背景图像，然后在滚动时更改B和D之间的距离。D改变距离的速度比B改变距离的速度快，C在向上滚动时将以接近1:2的比例进行平移

---

总之，使用视差脚本，大多数人倾向于采用这种格式。我对您的问题的解决方案是，将视差嵌套在包装器中，然后用另外两个div的内容将其包围。我可能过于简化了你的问题，但这就是我解决问题的方法。

你能为标题部分发布HTML/CSS吗？@abmitchell，这是下面只针对标题部分的代码，如果你还需要其他部分，请告诉我。实际上，我将它添加到了最上面的帖子中，这是我认为应该添加的内容，这更是造成我问题的原因。我相信，如果我只是改变背景图像，我可以在纯CSS中实现这种效果。在你的例子中，孩子“C”将是我图片顶部的橙色。在这个DIV中有一个滑动旋转木马，它使用了位置：相对等内部。也许我想得太多了。不知道我是否可以将每张幻灯片的背景设置为固定的，并通过这种方式来实现。有这么多的方法来做事情，最简单的方法是在那里处理代码，然后等待，直到你看到事情开始工作。在你的情况下，我可以整天整夜地向你展示代码示例，让它为你工作，但在你的场景中，你觉得这是完成工作的最好和最可行的方法。因此，如果你碰巧看到：仍然没有达到我要找的效果，但我开始认为最好根据滚动位置调整高度。就像在detect中一样，如果我的固定导航在顶部，比如说，在页面下方500个像素的位置应该会出现这种效果，那么当用户继续滚动时，开始降低高度。这是个坏主意吗？不，如果行得通，那太好了！据我所知，基于CSS的固定导航条始终位于顶部0px处，因此没有可以提取的位置数据。我建议使用jquery粘性脚本，然后使用一个脚本，在该页面上的任意位置创建锚。我建议使用以下两种脚本来实现您的结果：