javascript - 动画滚动图像到窗口上的特定位置

Question

例如：

1）我有一个 100px*900px 的 div

2) 我有一张 100px*200px 的图片

我想要的是我想将我的图像移动我向上或向下滚动的确切像素数

谁能告诉我
更新
检查这个。
当我动画（缓慢）向下滚动而不是固定位置时，我也想移动该图像。

Answer 1

您想在 Javascript 中查看对象的scrollY属性。window这保存了窗口滚动的量。

然后，您可以使用jQuery .animate 之类的东西将图像移动到所需的数量。

$('#yourImage').animate({"top":window.scrollY+"px"});

注意：此代码假定您的图像是绝对定位的。

编辑

$(window).scroll(function(data){
    //It is important to use .stop() for this as otherwise every slight scroll will add the animation to the animation queue.
    //What you want is for it to forget the others and go to the latest scroll position
    $('#im').stop().animate({"top":(window.scrollY + 10)+"px"}, 500);
});

每次触发滚动事件时，此代码都会移动图像。我已经使用这个 jsFiddle在 Firefox 中测试了这个