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

Question

如何确定div顶部与当前屏幕顶部之间的距离？我只想要像素距离到当前屏幕的顶部,而不是文档的顶部.我试着像一些事情.offset()和.offsetHeight,但我不能环绕它我的大脑.谢谢!

Answer 1

您可以使用.offset()获取与document元素相比的偏移量,然后使用元素的scrollTop属性window来查找用户滚动页面的距离:

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

的distance变量现在保持从顶部的距离#my-element元件和顶部倍.

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

请注意,负值表示元素位于顶部上方.

Answer 2

香草:

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

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

   console.log(distanceToTop);
});

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

Answer 3

这完全可以使用JavaScript来实现。

我看到我要写的答案已经由lynx在对该问题的评论中得到了回答。

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

因此，如果您只想从屏幕窗口顶部获取元素的距离（以像素为单位），则需要执行以下操作：

// Fetch the element
var el = document.getElementById("someElement");  

使用getBoundingClientRect（）

// Use the 'top' property of 'getBoundingClientRect()' to get the distance from top
var distanceFromTop = el.getBoundingClientRect().top; 

而已！

希望这可以帮助某人:)

Answer 4

我用过这个:

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