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

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

Puede usar .offset()para obtener el desplazamiento en comparación con el documentelemento y luego usar la scrollToppropiedad del windowelemento para encontrar qué tan abajo de la página se ha desplazado el usuario:

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

La distancevariable ahora mantiene la distancia desde la parte superior del #my-elementelemento y el pliegue superior.

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

Tenga en cuenta que los valores negativos significan que el elemento está por encima del pliegue superior.

Vainilla:

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

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

   console.log(distanceToTop);
});

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

Esto se puede lograr únicamente con JavaScript .

Veo que la respuesta que quería escribir fue respondida por Lynx en los comentarios a la pregunta.

Pero voy a escribir la respuesta de todos modos porque, al igual que yo, la gente a veces se olvida de leer los comentarios.

Entonces, si solo desea obtener la distancia de un elemento (en píxeles) desde la parte superior de la ventana de la pantalla, esto es lo que debe hacer:

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

use getBoundingClientRect ()

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

¡Eso es!

Espero que esto ayude a alguien :)

Usé esto:

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

Usé esta función para detectar si el elemento es visible en el puerto de vista

Código:

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