jQuery - 计算元素进入veiwport时的滚动比率？

Question

如何在元素进入视点后立即计算它的滚动比？

我的几个来源的代码组合：

＆＃13;

＆＃13;

<form id='duration'>
  <input id='h' name='h' type='number' min='0' max='24'>
  <label for='h'>h</label>
  <input id='m' name='m' type='number' min='0' max='59'>
  <label for='m'>m</label>
  <input id='s' name='s' type='number' min='0' max='59'>
  <label for='s'>s</label>
</form>

＆＃13;

$(document).ready(function(){

  var initY = $('.scrollratio').offset().top
  var height = $('.scrollratio').height()
  var endY  = initY + $('.scrollratio').height()

  $(window).scroll(function(){
    var scroll = $(window).scrollTop()

    var visible = isVisible(document.getElementById("demo"))
    console.log(visible)

    if (visible) {
      console.log('in view')
    } else {
      console.log('out of view')
    }

    if(visible){
      var diff = scroll - initY
      var ratio = Math.round((diff / height) * 100)
      $('#note').text(ratio)
    }
  })
})

// Check if the element is in the viewport.
// http://www.hnldesign.nl/work/code/check-if-element-is-visible/
function isVisible(node) {
    // Am I visible?
    // Height and Width are not explicitly necessary in visibility detection, the bottom, right, top and left are the
    // essential checks. If an image is 0x0, it is technically not visible, so it should not be marked as such.
    // That is why either width or height have to be > 0.
    var rect = node.getBoundingClientRect()
    return (
        (rect.height > 0 || rect.width > 0) &&
        rect.bottom >= 0 &&
        rect.right >= 0 &&
        rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.left <= (window.innerWidth || document.documentElement.clientWidth)
    )
}

＆＃13;

* {
    padding: 0;
    margin: 0;
}
body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

body {
  background:#171717;
}

.section-1 {
  width: 100%;
  min-height: 100%;
}

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

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

＆＃13;

＆＃13;

＆＃13;

当元素（红色框）进入视口时，负值;当元素的顶部开始通过时，仅获得正值窗口的顶部。

如果元素在视口中，如何获得正值的任何想法？

修改

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="note" ></div>
<div class="section-1"></div>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<div class="scrollratio" id="demo"></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>

＆＃13;

$(document).ready(function(){

  var initY = $('.scrollratio').offset().top
  var height = $('.scrollratio').height()
  var endY  = initY + $('.scrollratio').height()
  var wHeight = $(window).height();

  $(window).scroll(function(){
    var scroll = $(window).scrollTop()

    var visible = isVisible(document.getElementById("demo"))

    if(visible){
      var diff = scroll + wHeight - initY
      var ratio = Math.round((diff / height) * 100)
      $('#note').text(ratio)
    }
  })
})

// Check if the element is in the viewport.
// http://www.hnldesign.nl/work/code/check-if-element-is-visible/
function isVisible(node) {
    // Am I visible?
    // Height and Width are not explicitly necessary in visibility detection, the bottom, right, top and left are the
    // essential checks. If an image is 0x0, it is technically not visible, so it should not be marked as such.
    // That is why either width or height have to be > 0.
    var rect = node.getBoundingClientRect()
    return (
        (rect.height > 0 || rect.width > 0) &&
        rect.bottom >= 0 &&
        rect.right >= 0 &&
        rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.left <= (window.innerWidth || document.documentElement.clientWidth)
    )
}

＆＃13;

* {
    padding: 0;
    margin: 0;
}
body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

body {
  background:#171717;
}

.section-1 {
  width: 100%;
  min-height: 100%;
}

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

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

＆＃13;

＆＃13;

＆＃13;