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

Question

例如：

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

2）我有一个图像100px * 200px

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

任何人都可以告诉我更新
检查一下。
当我向下（动画地）慢慢地向下滚动时，我想移动那个图像。

Answer 1

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

然后，您可以使用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);
});

此代码将在每次触发滚动事件时移动图像。我在Firefox中使用this jsFiddle

对此进行了测试