单个 div 上的视差效果

Question

我真的不认为视差是描述我想要实现的目标的最佳词，但我不知道如何措辞。

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

但是，我想在中间有另一个类似的部分。

我想要实现的事件顺序：

1. -用户在页面顶部，标题完全可见的全高
2. -用户向下滚动，页面内容滑到标题上方
3. -一旦用户在页面顶部附近有 LAYER A，使该层保持在固定位置
4. -用户继续向下滚动页面，B层（页面的其余部分）继续滑过A层（可能只剩下75px左右的div 可见）

我还创建了一个图像来配合 this

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

提前感谢您的帮助！

编辑 2：我已经达到了我的效果……可能是想多了。这有点 hacky，我确信有更好的方法来处理它，但我已经这样做了：

$(window).scroll(function() {

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

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

Answer 1

我在各种项目中使用了许多视差脚本。我需要很长时间才能让它们按照我想要的方式工作，因此最好尝试使用您的脚本或其他人的脚本。

通常，他们查看父级，然后代码使其父级和 2 个子 div 层之间的空间改变距离。

例如：

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

总而言之，使用视差脚本，大多数人倾向于遵循这种格式。我对您的问题的解决方案是将您的视差嵌套在一个包装器中，然后用其他 2 个带有内容的 div 将其包围。我可能过度简化了您的问题，但这就是我解决问题的方式。