Calculate percentage ratio on scroll ( with Jquery )

index.html

<div id="note" ></div>
<br><br><br><br><br><br><br><br><br><br><br>
<div class="scrollratio" ></div>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>

<style>
body {
  background:#171717;
}

.scrollratio {
  height: 2000px;
  background:red;
}

#note {
  position: fixed;
  top: 0;
  left: 0;
  color: #FFFFFF;
  margin: 2em;
}
</style>

<script>
$(document).ready(function(){
  
  var initY = $('.scrollratio').offset().top;
  var height = $('.scrollratio').height();
  var endY  = initY + $('.scrollratio').height();
  
  $(window).scroll(function(){
    var scroll = $(window).scrollTop();
    if(scroll > initY && scroll < endY){
      var diff = scroll - initY;
      var ratio = Math.round((diff / height) * 100);
      $('#note').text(ratio);
    }
  });
});


</script>

https://codepen.io/lemagus/pen/RWxEYz