ウィンドウ内をスクロールするときの補間要素

Question

スクロールするときに、要素がウィンドウを移動するときにパーセント値を補間しようとしています。

基本的に、要素の上端がウィンドウの下端と一致すると、0％が返されます。要素の下端がウィンドウの上端と一致すると、100％が返されます。

これまでのところ、私は要素の真ん中を使って補間することができますが、中間ではなく、からを開始する方法を理解できません。

Heres a Demo

$(document).ready(()=>{ 

    //Element Vars - Test for Element 3 
    const $interpolateTarget = $('#element3'); 
    const elementH = $interpolateTarget.height(); 
    const elementY = $interpolateTarget.offset().top; 

    //Window Vars 
    const windowH = $(window).height() 
    let scrollY; 
    let interpolation; 
    let middlePoint; 

    $(window).scroll((event)=>{ 

    scrollY = $(window).scrollTop() 
    pctOfWindow = elementH/windowH 

    //Calculate middle of element and compare to middle of window 
    middleY = elementH/2 + elementY - scrollY 
    windowMiddleY = windowH/2 
    interpolation = middleY/windowMiddleY/2 

    //Convert to percentage and reverse 
    interpolation = (interpolation * 100 - 100) * -1 

    updateInfo(scrollY, interpolation); 
    }) 
}) 

任意のヘルプをいただければ幸いです、ありがとう！

Answer 1

私は、ウィンドウの高さの代わりにドキュメントの高さを考慮する必要があると思います。以下はあなたを助けるかもしれません。

updateInfo(scrollY, 100 * $(document).scrollTop()/($(document).height() - $(window).height())); 

• $（文書）.scrollTop（）：実際の文書の高さ
• $：文書全体に
• $（文書）.height（）をどのくらいスクロールさ（ドキュメント）.height（） - $（ウィンドウ）.height（）：スクロール可能なドキュメントの高さ

Answer 2

要素を変更しました。要素H/2 +要素Yをスクロールします。要素H +要素Yにスクロールします。