Определите расстояние от вершины div до вершины окна с помощью javascript

Как определить расстояние между самой вершиной div до верхней части текущего экрана? Я просто хочу, чтобы расстояние между пикселями находилось в верхней части текущего экрана, а не в верхней части документа. Я пробовал несколько вещей, таких как .offset() и .offsetHeight, но я просто не могу обернуть вокруг себя мозг. Спасибо!

Ответ 1

Вы можете использовать .offset() для получения смещения по сравнению с элементом document, а затем использовать свойство scrollTop элемента window, чтобы найти, как далеко вниз по прокручиваемой странице:

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

Теперь переменная distance содержит расстояние от вершины элемента #my-element и верхнюю часть.

Вот демо: http://jsfiddle.net/Rxs2m/

Обратите внимание, что отрицательные значения означают, что элемент находится над верхним краем.

Ответ 2

Vanilla:

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

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

   console.log(distanceToTop);
});

Откройте консоль браузера и прокрутите страницу, чтобы увидеть расстояние.

Ответ 3

Я использовал это:

                              myElement = document.getElemenById("xyz");
Get_Offset_From_Start       ( myElement );  // returns positions from website start position
Get_Offset_From_CurrentView ( myElement );  // returns positions from current scrolled view 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);
    });
    */