滚动时将图像移动到页面上的特定位置

Question

我正在尝试一种特定的方式来移动一个图像(只是一个图像，而不是背景)到你滚动时的某个点。假设我加载了一个页面，该页面加载了一个图像，然后将图像滑到页面的左侧，当您滚动时，图像会滑到中间或底部，或者当您开始滚动页面时，图像滑到您想要的任何位置。图像通过一组文本或信息留在那里。我尝试过很多东西，比如：

stop().animate({"top":(window.scrollY)

我无法让它在滚动到特定位置时停留在该位置，如果您继续向下滚动，当我滚动时，图像会继续向下滚动，并且我不确定如何在某个点之后停止图像。

然后我试了一下：

    if($(window).scrollTop() + $(window).height() == $(document).height()) {
 var a = $(window).height() - 100;
 $('#scrolling').animate({

但是，我不能让它工作，当滚动回到顶部时，它不会返回到顶部。

有什么想法，我如何让图像漂浮在中心或顶部，甚至在侧面，然后移动到一个点时，向下滚动？我是走在正确的道路上，还是完全错误地做了这件事？感觉我在这里遗漏了什么，我不确定它是什么。

我认为我可以通过动画协议在HMTL5中做到这一点，但我不认为我可以做到这一点，我知道CSS3是健壮的，但它也非常不稳定，所以我认为JQuery或JavaScript是可行的，我可以让它部分工作，但不是完全工作。有什么想法吗？

我已经搜索了这个网站，但我找不到我要找的东西。这些是我发现相似的网站：Animated Scroll Image to a particular position on a window和这个：How to make an element fake position:fixed so it acts fixed until a certain scroll height, then attaches?

但我需要一张图片才能移动到一个点。这些链接的方向正确吗？我给出的示例代码是从哪里开始的吗？

Answer 1

看看Skroller，它是一个JS库(不依赖于jQuery，但它需要js )，允许您定义某些操作。基本情况下，您可以向div中添加一些数据元素，该元素说明应该在哪个像素(滚动的)处开始动画，何时停止，以及在确定滚动的过程中所做的事情(例如，移动到屏幕中央)。

向后滚动效果良好(在我们的一个项目中使用)