使用 javascript 确定从 div 顶部到窗口顶部的距离

小开

最佳答案

您可以使用 .offset()获得与 document元素相比的偏移量，然后使用 window元素的 scrollTop属性查找用户滚动页面的深度:

var scrollTop     = $(window).scrollTop(),
elementOffset = $('#my-element').offset().top,
distance      = (elementOffset - scrollTop);

distance变量现在保持与 #my-element元素顶部和顶部折叠的距离。

这里是一个演示: http://jsfiddle.net/Rxs2m/

请注意，负值意味着元素位于顶部折叠之上。

小开

我用了这个:

                              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);
});
*/

小开

香草:

window.addEventListener('scroll', function(ev) {


var someDiv = document.getElementById('someDiv');
var distanceToTop = someDiv.getBoundingClientRect().top;


console.log(distanceToTop);
});

打开浏览器控制台并滚动页面以查看距离。

小开

这可以实现 纯粹使用 JavaScript。

我看到我想写的答案已经被猞猁在问题的评论中回答了

但我还是要写答案，因为就像我一样，人们有时会忘记阅读评论。

因此，如果你只想得到一个元素与屏幕窗口顶部的距离(以像素为单位) ，你需要做的是:

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

够了！

希望这对某些人有所帮助:)

小开

我使用这个函数来检测元素是否在视图端口中可见

密码:

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