jQuery - エレメントにスクロールする割合を計算します。

Question

要素のスクロール率は、視点に入るとすぐにどのように計算できますか？

源のカップルからのコードのマイ組み合わせ：

$(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) 
 
    ) 
 
}

* { 
 
    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; 
 
}

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

要素（赤いボックス）はビューポートに入り、のみ取得したときにそれが負の値を取得要素の上部がウィンドウの上部を通過し始めるときの正の値。

任意のアイデアの正の値を取得する方法は、要素がビューポートに入るとすぐにですか？

EDIT：

$(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) 
 
    ) 
 
}

* { 
 
    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; 
 
}

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

 

 
<div id="note" ></div> 
 
<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>

Answer 1

私はそれはあなたにも、ウィンドウの高さを占めていないため、単純だと思います。ちょうどあなたの計算にvar wHeight = $(window).height();を追加し、私はそれが解決されたと信じています。下記参照。また、毎回呼び出す必要がないので、wheight変数をスクロールイベントの外に追加しましたが、そのような場合はウィンドウのサイズ変更と変数の更新を考慮する必要があります。
PS：私はvar diff =

EDITの計算にwHeight変数を追加しました：設定、私は以下のJavaScriptを更新した要求に応じて条件付きでそれが「最初」ウィンドウの高さの範囲内かどうかのかどうかに基づいてwHeight 。場合

$(document).ready(function(){ 
 

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

 
    if(initY > $(window).height()){ 
 
    wHeight = $(window).height(); 
 
    } else { 
 
    wHeight = 0; 
 
    }; 
 

 
    $(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) 
 
    ) 
 
}

* { 
 
    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; 
 
}

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

あなたは次のようにスクリプト「プルーフのサイズを変更する」場合と同様にinitY < $(window).height()に負の数を避けるためには、あなたが行うことができますしたいと思います（グローバル変数に依存しています） ：

$(document).ready(function(){ 
function setVars(){ 
    initY = $('.scrollratio').offset().top 
    height = $('.scrollratio').height() 
    endY = initY + $('.scrollratio').height(); 

    if(initY > $(window).height()){ 
    wHeight = $(window).height(); 
    } else { 
    wHeight = 0; 
    }; 
}; 
setVars(); 
    $(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); 
     if(ratio >= 0){ 
     $('#note').text(ratio); 
     }; 
    } 
    }) 
$(window).on("resize", setVars); 
}) 

// 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) 
    ) 
}