对单个div的视差效应

Question

我并不认为视差是描述我想要实现的目标的最佳词汇，但我不知道如何用它来表达。

基本上，我有一个固定的标题部分，允许页面的其余部分在顶部滑动，并按预期工作。

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

我正在努力实现的事件顺序：

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

我还创建了一个与此

一起使用的图片

我尝试使用变换使用固定相对定位，但这并不完全正常。理想情况下，我想使用纯CSS来实现这一目标，但我并不反对使用jQuery。

提前感谢您的帮助！

编辑2：我已经实现了我的效果......可能有理由过度思考它。这很苛刻，我确信有更好的方法来处理它，但我已经完成了这个：

$(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。 你希望Parallax发生在“C”上。 B和D之间的距离需要改变以模拟该效果，通常是在滚动时向上平移C的背景图像，然后在滚动时改变B和D之间的距离。 D将比B改变距离更快地改变距离，当你向上滚动时，C将以接近1：2的比率平移。

总结一下，使用视差脚本，大多数都倾向于遵循这种格式。我对你的问题的解决方案是你将Parallax嵌套在一个包装器中，然后用另外两个包含内容的div包围它。我可能过度简化你的问题，但这就是我解决问题的方法。