Określ odległość od wierzchołka elementu div do początku okna za pomocą javascript

Question

Jak określić odległość między wierzchołkiem elementu div a górą bieżącego ekranu? Chcę tylko odległość w pikselach na górze bieżącego ekranu, a nie na górze dokumentu. Próbowałem kilka rzeczy, takich jak .offset() i .offsetHeight, ale po prostu nie mogę otoczyć mojego mózgu. Dzięki!

Answer 1

Można użyć .offset() aby uzyskać przesunięcie w stosunku do elementu document a następnie użyć właściwości elementu windowscrollTop znaleźć, jak daleko w dół strony użytkownik przewijane:

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

Zmienna distance teraz utrzymuje odległość od góry elementu #my-element i górnego zagięcia.

Oto demo: http://jsfiddle.net/Rxs2m/

Zauważ, że wartości ujemne oznaczają, że element znajduje się powyżej górnego-krotnie.

Answer 2

użyłem to:

       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 

Kod:

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

Answer 3

Vanilla:

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

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

    console.log(distanceToTop); 
}); 

Otwórz konsolę przeglądarki i przewinąć stronę, aby zobaczyć odległość.