Determine la distancia desde la parte superior de un div a la parte superior de la ventana con javascript

Question

¿Cómo determino la distancia entre la parte superior de un div en la parte superior de la pantalla actual? Solo quiero la distancia de píxel a la parte superior de la pantalla actual, no la parte superior del documento. He intentado algunas cosas como .offset() y .offsetHeight, pero no puedo entender mi cerebro. ¡Gracias!

Answer 1

Puede utilizar .offset() para obtener el desplazamiento en comparación con el elemento document y luego utilizar la propiedad scrollTop del elemento window para encontrar a qué distancia de la página que el usuario se haya desplazado:

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

La variable distance ahora contiene la distancia desde la parte superior del elemento #my-element y el pliegue superior.

Aquí es una demostración: http://jsfiddle.net/Rxs2m/

Tenga en cuenta que los valores negativos significan que el elemento está por encima de la parte superior veces.

Answer 2

He utilizado este:

       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 

código:

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

Vainilla:

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

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

    console.log(distanceToTop); 
}); 

Abra su consola de navegador y desplazarse su página para ver la distancia.