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

Question

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).

Answer 1

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).

Here is my solution using plain JavaScript. It includes recalculation on window's resize, too.

 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 ).

Few notes on why this JavaScript looks the way it looks:

• 'use strict' is to opt into so called strict mode (MDN).
• document.documentElement.scrollHeight - window.innerHeight is height that we are interested in. It is height of the entire document reduced by the height of viewport. Why do we need that reduction? Because whatever is our current scroll position, we will never scroll completely out of document, ie we will always see some portion of it and that portion equals viewport's height.
  
  Another thing: It is stored in variable for readability, but in fact it could be put in place of height in the next line, as that is its only appearance.
• document.documentElement.scrollTop / height will give us our scroll position relatively to document's height, ie how many percent of document we have scrolled. It will be number in range from 0 to 1, but we are interested in range from 0 to 150, hence multiplying. And all of that is subtracted from 150, because we want to count from 150 to 0, not the opposite.
• If you want counter to display only integers, put the whole statement after counter.textContent = inside Math.round() .
• The two last lines attach function that updates counter to events of scroll and resize. That way, whenever we scroll or resize window, counter-updating function will be invoked.

I personally find this approach much clearer from the jQuery one that was posted here. And it has better performance too, of course.

UPDATE : Changed two occurrences of document.body to document.documentElement , because the manner in which at least one of them was used here was deprecated and stopped working.

Answer 2

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 )