Question

我正在根据页面顶部的滚动位置更改页面的背景颜色，但我想循环浏览所有颜色，而不管窗口的高度如何。我现在拥有的是严格基于滚动从页面顶部开始的像素数，但您会看到这取决于窗口高度。我怎么能修改它以使它始终滚动所有颜色，即使浏览器调整大小？

到目前为止我所拥有的： http://jsfiddle.net/keith/P7ER3/

Answer 1

这是文件高度：$(document).height()

这是视口的内容：$(window).height()

两个值的差异返回可向下滚动的最大像素数（如果为正）：

var max_scroll = $(document).height() - $(window).height();

最后，这将返回一个0到1之间的nuber，它反映了滚动量：

var scrollamount;
if (max_scroll > 0.0) {
    scrollamount = $(document).scrollTop() / max_scroll;
} else {
    scrollamount = 0.0;
}

你可以使用这个卷轴，总是在0到1之间从中计算出一种新的颜色。

Answer 2

您可以在percent difference和window.outerHeight之间使用window.pageYOffset。

  window.outerHeight // the pixel height of the browser's frame.

  window.innerHeight // the pixel height of the document within the browser's frame.

  window.pageYOffset  // reflects the current vertical pixel 
                      // location of the top-left corner of the document.

  var perDiff = window.pageYOffset / (window.outerHeight + window.innerHeight);  

  perDiff; // 0 when the scroll is on the top

  perDiff; // 1 when the scroll is on the bottom of the page

您可以使用position值代替perDiff，该值始终介于0和1之间，以便从中计算新颜色。

P.S。在jsfiddle中，这段代码不会起作用，因为perDiff指的是文档的高度而不是框架。

Answer 3

尝试更改此行：

scroll_pos = $(document).scrollTop();

到此：

scroll_pos = $(document).scrollTop() % 800;

当您滚动超过800px时，取模800的位置基本上会将其重置为零。

尽管窗口高度，仍保持页面顶部的滚动距离

3 个答案: