javascript - Nexus 5 网站 - 设备内的滚动 slider - 怎么做？

Question

我想产生与 Nexus 5 网站 ( http://www.google.com/nexus/5/ ) 相同的效果 - 在我滚动时保持 Nexus 和可变屏幕在其中(这是第 4 部分)。

我的情况是，我的网站上有相同的部分，但中间有一个 iPad，两边都有文本内容，我想在滚动时只更改 iPad 内的图像。

有什么想法吗？

非常感谢!

Answer 1

看看这个:<强> http://jsfiddle.net/sTH5w/47/show/

基本上通过“滚动”事件和位置控制 slider - scrollTop()例如:

if(/* some condition with $(document).scrollTop() */) {
    if($('#img2').css("margin-top") == "295px") { // if the image is down
        $('#img2').animate({"margin-top": "0px"}, 300); // slide the image up
    }
}

在此处查看完整代码:http://jsfiddle.net/sTH5w/47/

注意:在我的示例中， slider 之后的所有内容都必须在 <div id="after-slider"> 中显示出来。