Nexus 5网站 - 设备内滚动滑块 - 怎么做？

Question

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

我的情况是我在我的网站上有相同的部分,但是中间有一个iPad,两边都有文字内容,我想在我滚动时改变iPad内部的图像.

请问有什么想法吗？

非常感谢!

Answer 1

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

基本上通过'scroll'事件和位置控制滑块 - 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/

注意:在我的示例中,必须<div id="after-slider">显示滑块后面的所有内容.