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

对于一个项目，我必须使用 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;


});

JS小提琴在这里我有 atm 的东西（由 DelightedD0D 提供，顺便说一句，谢谢！）

我在互联网上搜索过，但找不到解决这个小问题的好方法。

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

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

多谢！

*edit:
我应该补充一点，在页面底部，计数器需要为 0，在顶部，计数器需要回到 150，所以，在我看来，每次滚动 X 像素量时，我都必须更新 html (X是“除”变量）。

Actually @Gaby aka G. Petrioli answer is a bit flawed. Value in variable pageHeight shouldn't be reduced by counter's distance from the top of the document, which is stored in variable offset. You can observe the resulting erroneous behavior, by changing counter's position, removing Math.round() (so that the error is not covered by approximation) and scrolling to the bottom. Or just see it in action right now. (fixed).

这是我使用纯 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>

(在 JSFiddle 上查看).

关于为什么这个 JavaScript 看起来像它的样子的一些注释：

• 'use strict'是选择所谓的严格模式 (MDN).
• document.documentElement.scrollHeight - window.innerHeight是我们感兴趣的高度。它是整个文档的高度减去视口的高度。为什么我们需要这样的减少？因为无论我们当前的滚动位置是什么，我们永远不会完全滚动出文档，即我们总是会看到它的某些部分，并且该部分等于视口的高度。
  
  另一件事：它存储在变量中以提高可读性，但实际上它可以代替height在下一行，因为这是它唯一的出现。
• document.documentElement.scrollTop / height将为我们提供相对于文档高度的滚动位置，即我们滚动了文档的百分之多少。它将是 0 到 1 范围内的数字，但我们感兴趣的是 0 到 150 范围内的数字，因此要相乘。所有这些都是从 150 中减去的，因为我们想要从 150 数到 0，而不是相反。
• 如果您希望计数器仅显示整数，请将整个语句放在后面counter.textContent = inside Math.round().
• 最后两行附加函数，更新滚动和调整大小事件的计数器。这样，每当我们滚动或调整窗口大小时，都会调用计数器更新函数。

我个人认为这种方法比此处发布的 jQuery 方法更清晰。当然，它也有更好的性能。

UPDATE：更改了两次出现的document.body to document.documentElement，因为这里至少使用其中一种的方式已被弃用并停止工作。