我正在寻找一种在 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。
最佳答案
您可以使用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
方法每秒打印滚动值,您可以滚动并查看值的变化。
关于javascript - 获取从 div 的高度 + 距顶部的距离滚动的像素数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43008626/