如何创建重叠的图像，在滚动时显示自己
我希望创建一个类似于此处所示的滚动效果： http ： //www.seaham-hall.co.uk/
但是我无法达到预期的效果，检查站点代码没有提示。 很难谷歌，因为它也很难描述。 我能找到最接近解决方案的是这个JSFiddle：
http://jsfiddle.net/xtyus/1/
(function($){ /* Store the original positions */ var d1 = $('.one'); var d1orgtop = d1.position().top; var d2 = $('.two'); var d2orgtop = d2.position().top; var d3 = $('.three'); var d3orgtop = d3.position().top; var d4 = $('.four'); var d4orgtop = d4.position().top; /* respond to the scroll event */ $(window).scroll(function(){ /* get the current scroll position */ var st = $(window).scrollTop(); /* change classes based on section positions */ if (st >= d1orgtop) { d1.addClass('latched'); } else { d1.removeClass('latched'); } if (st >= d2orgtop) { d2.addClass('latched'); } else { d2.removeClass('latched'); } if (st >= d3orgtop) { d3.addClass('latched'); } else { d3.removeClass('latched'); } if (st >= d4orgtop) { d4.addClass('latched'); } else { d4.removeClass('latched'); } }); })(window.jQuery); 然而，我不确定这是朝着正确的方向发展，这会拉动图像并覆盖之前的图像，但是在Seaham Hall网站上注意到图像看起来根本没有向上移动，它们是固定的，并且会在您显示时显示出来滚动。
如何重新创建此效果？ 我最初的想法是当你从1000px向下滚动到0px时第一个图像缩小，第二个图像增长到1000px，当你继续滚动这个图像然后缩小，第三个增长，依此类推。 然而，这意味着在第一个图像之后，所有其他图像的起始大小为0px，并且在技术上不会在页面上滚动开始，因此这是一个问题。
我的第二个想法是，也许第二个图像固定在页面上，第一个图像向上滑动，在滚动时显示第二个图像，第二个图像看起来不会移动。 一旦第一个图像离开页面顶部，第二个图像就会从页面上分离出来并允许其向上移动，而第三个图像会随着第二个图像向上移动而附着并显示出来，这样可以看到确切的效果。 Seaham网站，但我不知道这是正确的答案。
如果有人能指出我的教程或基本概念的JSFiddle，我可以从那里弄清楚。 只是难以接近这个方向。
这是一个很好的效果。 这是一种方法。
将每个图像放在一个固定位置div ，它占据整个视口（最初）并具有overflow:hidden 。
将每个div的z-index设置为高于下一个div 。
当窗口滚动时，调整div的高度作为窗口高度乘以DOM中div的位置（索引）的函数，减去窗口的scrollTop：
$(window).scroll(function() { $('.D').each(function(index) { $(this).css({ height: $(window).height()*(index+1) - $(window).scrollTop() }); }); });
其他内容需要比图像div更高的z-index。 请注意，z-index仅适用于定位元素。
小提琴
你所期望的效果在技术上并不是视差背景，但它足够接近视差jQuery框架应该适合你。
我建议你研究一下jQuery Parallax插件，因为他们可能会提供你想要的function，而不需要太多的自定义工作。 当然，既然你正在处理大型图像，那么最好还是关注资源管理; 一个好的插件应该是相当有效的，但其他插件可能很慢或资源密集。
检查这个jquery插件： ScrollMagic
用法： 取自github
基本的ScrollMagic设计模式是一个控制器，它附有几个场景。 每个场景都有一个明确的开始和结束位置，并定义当容器滚动到特定偏移量时会发生什么。
/* Basic workflow example */ // init controller var controller = new ScrollMagic(); // assign handler "scene" and add it to controller var scene = new ScrollScene({duration: 100}) .setPin("#my-sticky-element") // pins the element for a scroll distance of 100px .addTo(controller); // add scene to controller // adding multiple scenes at once var scene2 = new ScrollScene(); var scene3; controller.addScene([ scene2, scene3 = new ScrollScene({duration: 200}), // add scene and assign handler "scene2" new ScrollScene({offset: 20}) // add anonymous scene ]);