如何确定 div 的最顶部到当前屏幕顶部之间的距离？我只想要到当前屏幕顶部的像素距离，而不是文档顶部。我已经尝试了一些像.offset()和 之类的东西.offsetHeight，但我就是无法理解它。谢谢！
使用javascript确定从div顶部到窗口顶部的距离
IT技术
javascript
jquery
2021-02-03 05:33:09
5个回答
您可以使用.offset()获取与document元素相比的偏移量，然后使用元素的scrollTop属性window来查找用户向下滚动页面的距离：
var scrollTop = $(window).scrollTop(),
elementOffset = $('#my-element').offset().top,
distance = (elementOffset - scrollTop);
该distance变量现在保存从#my-element元素顶部到顶部折叠的距离。
这是一个演示：http : //jsfiddle.net/Rxs2m/
请注意，负值表示元素位于顶部折叠上方。
香草：
window.addEventListener('scroll', function(ev) {
var someDiv = document.getElementById('someDiv');
var distanceToTop = someDiv.getBoundingClientRect().top;
console.log(distanceToTop);
});
打开浏览器控制台并滚动页面以查看距离。
这可以完全使用 JavaScript来实现。
我看到lynx在对问题的评论中回答了我想写的答案。
但无论如何我都会写下答案，因为就像我一样，人们有时会忘记阅读评论。
因此，如果您只想从屏幕窗口顶部获取元素的距离（以像素为单位），您需要执行以下操作：
// Fetch the element
var el = document.getElementById("someElement");
// Use the 'top' property of 'getBoundingClientRect()' to get the distance from top
var distanceFromTop = el.getBoundingClientRect().top;
而已！
希望这对某人有所帮助:)
我用过这个：
myElement = document.getElemenById("xyz");
Get_Offset_From_Start ( myElement ); // returns positions from website's start position
Get_Offset_From_CurrentView ( myElement ); // returns positions from current scrolled view's TOP and LEFT
代码：
function Get_Offset_From_Start (object, offset) {
offset = offset || {x : 0, y : 0};
offset.x += object.offsetLeft; offset.y += object.offsetTop;
if(object.offsetParent) {
offset = Get_Offset_From_Start (object.offsetParent, offset);
}
return offset;
}
function Get_Offset_From_CurrentView (myElement) {
if (!myElement) return;
var offset = Get_Offset_From_Start (myElement);
var scrolled = GetScrolled (myElement.parentNode);
var posX = offset.x - scrolled.x; var posY = offset.y - scrolled.y;
return {lefttt: posX , toppp: posY };
}
//helper
function GetScrolled (object, scrolled) {
scrolled = scrolled || {x : 0, y : 0};
scrolled.x += object.scrollLeft; scrolled.y += object.scrollTop;
if (object.tagName.toLowerCase () != "html" && object.parentNode) { scrolled=GetScrolled (object.parentNode, scrolled); }
return scrolled;
}
/*
// live monitoring
window.addEventListener('scroll', function (evt) {
var Positionsss = Get_Offset_From_CurrentView(myElement);
console.log(Positionsss);
});
*/
我使用此功能来检测元素是否在视口中可见
代码：
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(),
elementOffset = $('.for-scroll').offset().top,
distance = (elementOffset - scrollTop);
if(distance < vh){
console.log('in view');
}
else{
console.log('not in view');
}
});