title: Visual counter relative to scroll position on page
body: <p>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.</p>
  
  <p>I'm not entirely sure how i should go about doing this but here's what i have so far:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;span class="meterCounter"&gt;
      &lt;label class="number"&gt;150&lt;/label&gt;
      &lt;label class="rotated"&gt;mtr.&lt;/label&gt;
  &lt;/span&gt;  
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>// 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;
  
  
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/DelightedDoD/d160vLqm/16/" rel="nofollow">JSfiddle here</a> of what i have atm (by DelightedD0D, thanks btw!)</p>
  
  <p>I've searched around the interwebs but can't find a good solution to this little problem here.</p>
  
  <p>Help and advice on how to solve this mystery is much appreciated!</p>
  
  <p>(note: not asking for people to write code for me, just some solid advice or a push in the right direction! :] ).</p>
  
  <p>Thanks alot!</p>
  
  <p><strong>*edit:</strong><br/>
  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).</p>