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。它不支持调整文档的大小，并且它没有经过优化，但它是一个开始。

Answer 2

无论您要移动什么，您需要的主要内容是浏览器窗口的滚动位置百分比。这需要一些计算，因为滚动位置仅由浏览器提供为屏幕顶部上方的像素数：

// Vanilla Javascript
var scrollPercent = document.body.scrollTop / (document.body.scrollHeight - window.innerHeight);

// JQuery
var scrollPercent = $(window).scrollTop() / ($(document.body).height() - $(window).height());

以百分比形式显示滚动位置后，您可以使用它来设置固定元素的top属性，以将其放置在窗口中：scrollPercent * window.height。

Here's a JSFiddle that demonstrates this.

Answer 3

检查一下：

http://codepen.io/anon/pen/zolLe

$( ".scroll__inner" ).click( function(){
    console.log("this1");
    window.scrollBy(0,600); 
});

在此我添加了一个关于点击事件的向下滚动，其他所有与@ckuijjer回答相同。我使用了按功能滚动向下滚动。您也可以通过给予scrollby高度直接滚动到底部。

Answer 4

如果你想在整个窗口上显示所有滚动位置的图像，在你的图像标签中放置这种风格：

<img id="img1" src="" style="position:fixed; top=0; left=o; width:100%; height:100%; z-index:-10;" />

$(function(){
    $("#img1").css({"height": $(document.height()) + "px", "width": $(document.width()) + "px"});
});

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

4 个答案: