divの高さからスクロールされたピクセルの量+上からの距離を取得する

Question

jQueryまたはpure JSでページの上からではなく下からスクロールされるピクセルの量を取得する方法を探していますDIVの

つまり、divの高さ+ページの上部からピクセルまでの距離を変数にスクロールする必要があります。

この視差コードを下に追加したいので、ページの上から計算する代わりに、目標divの上からの距離+高さを計算します。

私は私が200pxの高さのdivを持っていた場合、私は、例えば、フレーズ、この十分な非常に明確、私は唯一のdivを渡すので、スクロールピクセルの量の値を取得しているよ、そうしませんでした実現

/* Parallax Once Threshold is Reached */ 

var triggerOne = $('#trigger-01').offset().top;  

$(window).scroll(function(e){ 

    if ($(window).scrollTop() >= triggerOne) { 

    function parallaxTriggerOne(){         
     var scrolled = $(window).scrollTop(); 
     $('#test').css('top',+(scrolled*0.2)+'px'); 
    } 

    parallaxTriggerOne(); 

    } else { 
    $('#test').css('top','initial'); 
    } 

}); 

ページの最上部と20ピクセルを超えてスクロールすると、必要な変数は220ではなく20になります。

Answer 1

あなたはあなたのdivの下を与えるページの最上部からのdivの距離にdiv.offsetHeightを追加し、 をdiv.offsetTopを使用してのdivの位置を取得することができます使用することができ、あなたが取得するために、ウィンドウのスクロールから差し引くことができますあなたの希望する価値。

ご不明な点がありましたらお気軽にお問い合わせください。このスニペットsetInterval方法で

var div = document.getElementById('foo'); 
 
let div_bottom = div.offsetTop + div.offsetHeight; 
 
var doc = document.documentElement; 
 
var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0); 
 
var scroll_top, scroll_after_div; 
 

 
setInterval(function(){ 
 
    scroll_top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); 
 
    scroll_after_div = scroll_top - div_bottom; 
 
    console.log(scroll_after_div); 
 
}, 1000);

body { margin: 0; }

<div id="foo" style="position:relative; top: 100px; height: 30px; width: 100%; background-color: #000;"></div> 
 

 
<div id="bar" style="position:relative; top: 700px; height: 30px; width: 100%; background-color: #000;"></div>

は、各第2スクロール値を印刷しているあなたは、スクロールして値の変化を見ることができます。

Answer 2

ページの上部から要素の最下部までの距離を計算するには、要素outerHeight()はoffset().topです。

例：あなたはdocument.getElementById("my-element").getBoundingClientRect().bottomと直接のdivの下を得ることができ、純粋なJSでhttps://jsfiddle.net/dw2jwLpw/

console.log(
    $('.target').outerHeight() + $('.target').offset().top 
); 

Answer 3

。

jQueryので

あなたは$('#my-element').offset().top + $('#my-element').height()