获取从div的高度+距顶部的距离滚动的像素量

Question

我正在寻找一种在jQuery或纯JS中获得像素滚动量的方法，不是从页面的顶部，而是从div的底部。

换句话说，我需要将超出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');
  }  

});

我意识到我说的还不够清楚，我只想得到自从传递div以来滚动的像素的数量，所以，例如，如果我在页面最上面有一个200 it高的div，我在页面上方滚动了20个像素，我需要的变量是20，而不是220。

Answer 1

要计算从页面顶部到元素底部的距离，可以添加一个元素outerHeight()及其offset().top。

示例：https://jsfiddle.net/dw2jwLpw/

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

Answer 2

在纯JS中，您可以直接使用document.getElementById("my-element").getBoundingClientRect().bottom获取div的底部。

在jQuery中，您可以使用$('#my-element').offset().top + $('#my-element').height()