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

要计算从页面顶部到元素底部的距离，您可以使用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()

Answer 3

您可以使用div.offsetTop获得div的位置，将div.offsetHeight添加到div的页面顶部距离会给你底部div，然后你可以从窗口滚动中减去你想要的值。

随意询问您是否有任何疑问。

＆＃13;

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

＆＃13;

body { margin: 0; }

＆＃13;

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

＆＃13;

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

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

3 个答案: