相对于页面上滚动位置的可视计数器 [英] Visual counter relative to scroll position on page

问题描述

对于一个项目，我必须用html和javascript制作一个可视计数器，相对于窗口的滚动位置，它可以从150减少到零。

我不完全确定我应该如何去做这件事，但这里是我到目前为止：
$ b

HTML：

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

JS：

  //计算页面高度（记住元素位置）：
 var offset = $（。meterCounter）。offset（）。top; 
 var pageHeight = $（document）.height（） -  offset; 
 
 //计算用户应滚动多少个像素直到html更改：
 var divide = pageHeight / 150; 
 
 count = 150; 
 
 $（document）.scroll（function（）{
 
 var scrollPosition = $（window）.scrollTop（）; 
 
 //（如果语句在这里决定html何时应该改变，那么magic if语句）
 
 count--; 
 $（。number）。html（count）; 
 divide = divide + divide; 
 
 
}）; 
  

JSfiddle在这里我有atm（由DelightedD0D，谢谢btw！）

我已经搜索过interwebs，但不能在这里找到一个很好的解决方案来解决这个小问题。

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

（注意：不要求人们为我写代码，只需要一些坚实的建议或推动正确的方向！）]。

非常感谢！

*编辑：

i应该增加，在页面底部计数器需要在0和在顶部它需要回到150，所以，在我看来，我必须更新HTML每次我滚动X的像素数量（X是分变量）。

解决方案

扩展我的评论，你需要计算 scrollPosition 相对于总高度的位置

$ p
$ b

  //计算页面高度（记住元素位置）：
 var offset = $（ meterCounter。）偏移（）顶部。; 
 var pageHeight = $（document）.height（） -  $（window）.height（）; 
 
 //计算用户应滚动多少个像素直到html更改：
 var count = 150，
 divide = pageHeight / count; 
 $ b $（document）.scroll（function（e）{
 var scrollPosition = $（window）.scrollTop（），
 relevantToHeight = scrollPosition * count / pageHeight; 
 
 //（这里的magic if语句确定何时应该改变html）
 $（。number）。html（count  -  Math.round（relevantToHeight））; 
}） ; 
  

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

（请记住，在窗口中调整大小你需要重新计算大部分缓存变量）

For a project i have to make a visual counter with html and javascript that counts down from 150 to 0 relative to the scrolling position of the window.

I'm not entirely sure how i should go about doing this but here's what i have so far:

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 of what i have atm (by DelightedD0D, thanks btw!)

I've searched around the interwebs but can't find a good solution to this little problem here.

Help and advice on how to solve this mystery is much appreciated!

(note: not asking for people to write code for me, just some solid advice or a push in the right direction! :] ).

Thanks alot!

*edit:
i should add, at the bottom of the page the counter needs to be at 0 and at the top it needs to be back to 150, so, in my mind i have to update the html each time i scroll X amount of pixels (X being the "divide" variable).

解决方案

Expanding on my comment that you need to calculate where the scrollPosition is relative to the total height

A sample

// 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));
});

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

(keep in mind that on window resize you need to recalculate most of the cached variables)

这篇关于相对于页面上滚动位置的可视计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！