使用javascript确定div顶部到窗口顶部的距离
使用javascript确定div顶部到窗口顶部的距离
提问于 2012-03-27 05:57:18
如何确定div的顶部到当前屏幕顶部之间的距离？我只需要当前屏幕顶部的像素距离，而不是文档顶部的像素距离。我尝试过像.offset()和.offsetHeight这样的东西，但我就是想不通。谢谢!
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-03-27 06:05:35
您可以使用.offset()来获取与document元素相比的偏移量，然后使用window元素的scrollTop属性来确定用户滚动了页面的深度：
var scrollTop = $(window).scrollTop(),
elementOffset = $('#my-element').offset().top,
distance = (elementOffset - scrollTop);distance变量现在保存到#my-element元素顶部和顶部折叠的距离。
这是一个演示：http://jsfiddle.net/Rxs2m/
请注意，负值表示元素位于顶部折叠之上。
Stack Overflow用户
发布于 2016-02-23 15:53:36
香草：
window.addEventListener('scroll', function(ev) {
var someDiv = document.getElementById('someDiv');
var distanceToTop = someDiv.getBoundingClientRect().top;
console.log(distanceToTop);
});打开浏览器控制台，滚动页面查看距离。
Stack Overflow用户
发布于 2015-09-23 19:06:15
我使用了这个：
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);
});
*/页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9880472
复制相关文章
相似问题