SO Help

by Gabriele Petrioli

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<span class="meterCounter">
    <label class="number">150</label>
    <label class="rotated">mtr.</label>
</span>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
    margin: 10px;
}*/
.meterCounter{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
body{
  position:relative;
  height:40000px;
}

JavaScript

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

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

$(document).scroll(function(e){
		console.log(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));
});