Determine a distância do topo de uma div ao topo da janela com javascript

Como determino a distância entre o topo de uma div e o topo da tela atual? Eu só quero a distância do pixel na parte superior da tela atual, não na parte superior do documento. Eu tentei algumas coisas como .offset()e .offsetHeight, mas simplesmente não consigo envolver meu cérebro em torno disso. Obrigado!

Você pode usar .offset()para obter o deslocamento comparado ao documentelemento e, em seguida, usar a scrollToppropriedade do windowelemento para descobrir o quão abaixo a página o usuário rolou:

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

A distancevariável agora mantém a distância entre a parte superior do #my-elementelemento e a dobra superior.

Aqui está uma demonstração: http://jsfiddle.net/Rxs2m/

Observe que valores negativos significam que o elemento está acima da dobra superior.

Baunilha:

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

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

   console.log(distanceToTop);
});

Abra o console do navegador e role a página para ver a distância.

Isso pode ser alcançado puramente com JavaScript .

Vejo que a resposta que eu queria escrever foi respondida pelo lince nos comentários à pergunta.

Mas vou escrever a resposta de qualquer maneira, porque assim como eu, às vezes as pessoas esquecem de ler os comentários.

Portanto, se você deseja apenas obter a distância de um elemento (em pixels) da parte superior da janela da tela, eis o que você precisa fazer:

// 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; 

É isso aí!

Espero que isso ajude alguém :)

Eu usei isso:

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

Eu usei essa função para detectar se o elemento está visível na porta de visualização

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