Question

对于一个项目，我必须使用html和javascript创建一个可视计数器，该计数器相对于窗口的滚动位置从150倒数到0。

我不完全确定我该怎么做才能做到这一点，但到目前为止我所拥有的是：

HTML：

<span class="meterCounter">
    <label class="number">150</label>
    <label class="rotated">mtr.</label>
</span>

JS：

// calculate page height (keeping element position in mind):
var offset = $(".meterCounter").offset().top;
var pageHeight = $(document).height() - offset;

// calculate how many pixels user should scroll until html changes:
var divide = pageHeight / 150;

count = 150;

$(document).scroll(function(){

    var scrollPosition = $(window).scrollTop();

    // (magic if statement here that determines when html should change)

        count--;
        $(".number").html(count);
        divide = divide + divide;


});

JSfiddle here我所拥有的（通过DelightedD0D，谢谢顺便说一句！）

我已经在互联网上搜索了但是在这里找不到解决这个小问题的好方法。

非常感谢有关如何解决这个谜团的帮助和建议！

（注意：不要求人们为我编写代码，只是提出一些可靠的建议或推动正确的方向！：]）。

非常感谢！

*编辑：
我应该添加，在页面的底部，计数器需要为0，在顶部它需要回到150，所以，在我的脑海里，我必须更新html每次我滚动X像素数量（X是＆＃34;划分＆＃34;变量）。

Answer 1

其实@Gaby又名G. Petrioli的回答有点瑕疵。变量pageHeight中的值不应该通过计数器与文档顶部的距离来减少，该距离存储在变量offset中。您可以通过更改计数器的位置，移除Math.round()（以便错误未被近似覆盖）并滚动到底部来观察由此产生的错误行为。或者现在只是see it in action。（已修复）。

这是我使用纯JavaScript的解决方案。它还包括重新计算窗口的大小调整。

var counter = document.getElementById('counter');

function updateCounter() {
  'use strict';
  var height = document.documentElement.scrollHeight - window.innerHeight;
  counter.textContent = 150 - document.documentElement.scrollTop / height * 150;
}

document.addEventListener('scroll', updateCounter);
window.addEventListener('resize', updateCounter);

html, body {
  height: 1000%;
}
#counter {
  position: fixed;
}

<span id="counter">150</span>

（See it on JSFiddle）。

很少有人注意到这个JavaScript为什么看起来像它的样子：

'use strict'将选择加入所谓的strict mode（MDN）。
document.documentElement.scrollHeight - window.innerHeight是我们感兴趣的高度。整个文档的高度减少了视口的高度。为什么我们需要减少？因为无论我们当前的滚动位置如何，我们永远不会完全滚出文档，即我们将始终看到它的一部分，并且该部分等于视口的高度。

另一件事：为了便于阅读，它存储在变量中，但事实上它可以在下一行代替height，因为这是它唯一的外观。
document.documentElement.scrollTop / height会向我们提供相对于文档高度的滚动位置，即我们滚动的文档的百分比。它的数字范围从0到1，但我们感兴趣的范围从0到150，因此成倍增加。所有这些都从150减去，因为我们想要从150到0，而不是相反。
如果您希望计数器仅显示整数，请将counter.textContent =内的整个语句放在Math.round()内。
最后两行附加功能，用于更新与滚动事件和调整大小的事件的计数器。这样，每当我们滚动或调整窗口大小时，都会调用计数器更新功能。

我个人觉得这个方法比这里发布的jQuery更清楚。当然，它也有更好的表现。

更新：将document.body的两次更改更改为document.documentElement，因为此处至少使用其中一个的方式已弃用并停止工作。

Answer 2

扩展我的评论，您需要计算// calculate page height (keeping element position in mind): var offset = $(".meterCounter").offset().top; var pageHeight = $(document).height() - $(window).height(); // calculate how many pixels user should scroll until html changes: var count = 150, divide = pageHeight / count; $(document).scroll(function(e){ var scrollPosition = $(window).scrollTop(), relevantToHeight = scrollPosition*count/pageHeight ; // (magic if statement here that determines when html should change) $(".number").html(count - Math.round(relevantToHeight)); });相对于总高度的位置

样本

spark-csv

https://jsfiddle.net/gaby/d160vLqm/18/

演示

（请记住，在窗口调整大小时，您需要重新计算大多数缓存变量）

相对于页面上的滚动位置的可视计数器

2 个答案: