使用javascript暂停背景滚动，以允许固定元素进行幻灯片放映

Question

好了，我想要模拟的效果可以在nexus5站点上找到- http://www.google.com/nexus/5/ -当你滚动到手机部分时。我已经查看了源代码并查看了代码，但是有超过13k行的js代码，所以这是一种浪费。

无论如何，我所做的是添加一个类来固定图像的位置，并创建了一个类似于5000px的背景div，因此它看起来是固定的。js在屏幕到达某个点后固定位置，然后在div结束后删除固定的类。

我的问题是，我知道这可以比我那古怪的“黑客”做得更好。我很想听听你对更好的实现的想法。

这是添加固定类的代码的一部分

<script type="text/javascript">
$(window).scroll(function() {    



    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        $(".container").addClass("fixed");

    } 
    if (scroll >= 8000) {
     $(".container").removeClass("fixed");
 }


});

Answer 1

试试这个指南：

http://blog.teamtreehouse.com/multiplane-design-with-svgs-and-css-3d-transforms

演示：http://codepen.io/nickpettit/full/eBCrK

然而，我以前从来没有做过这样的事情。另外，需要注意的是，在平板电脑/智能手机上查看时，我的经验中的固定位置元素会出现问题。