javascript - 获取从 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 以来滚动的像素量的值，例如，如果我在最顶部有一个 200px 高的 div当我将页面滚动超过 20 个像素时，我需要的变量将等于 20，而不是 220。

Answer 1

您可以使用div.offsetTop获取div的位置，将 div.offsetHeight 添加到 div 与页面顶部的距离中将为您提供 div 的底部，然后您可以从窗口滚动中减去以获得所需的值。

如果您有任何疑问，请随时询问。

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>

在此代码段中，setInterval 方法每秒打印滚动值，您可以滚动并查看值的变化。