jquery - 当我向下滚动我的网站时，如何使具有固定定位的对象从浏览器窗口的顶部移动到底部？

Question

我的网站高度是浏览器窗口的 6 倍。当我从我的网站顶部滚动到底部时，我想要一个固定位置的图像从浏览器窗口的顶部移动到底部。

我给了你一些示例代码，但我完全被这个困住了，甚至不知道从哪里开始。

我只是在寻找一个非常简单的例子。我仅限于 html5、css 和 jquery。

Answer 1

你需要知道文档有多大var documentHeight = $(document).height()，屏幕有多大var screenHeight = $(window).height() 以及用户滚动了多远 var scrollAmount = $(window).scrollTop。

计算可以滚动的最大量 var maxScrollAmount = documentHeight - windowHeight 并使用它来确定页面的哪一部分已经被看到(0 到 1 之间的数字)var amountSeen = scrollAmount/maxScrollAmount。如果将它乘以窗口的大小，您就会知道图像的 top 应该有多远 var top = amountSeen * windowHeight

我已经开始开发一个您可以扩展的小型 jQuery 插件，请参阅 http://codepen.io/ckuijjer/pen/lGqAs .它不支持调整文档大小，也没有优化，但这是一个开始。