Determina la distanza dalla cima di un div alla cima della finestra con javascript

Come posso determinare la distanza tra la cima di un div e la cima della schermata corrente? Voglio solo la distanza in pixel dalla parte superiore della schermata corrente, non dalla parte superiore del documento. Ho provato alcune cose come .offset()e .offsetHeight, ma non riesco proprio a farci impazzire. Grazie!

È possibile utilizzare .offset()per ottenere l'offset rispetto documentall'elemento e quindi utilizzare la scrollTopproprietà windowdell'elemento per trovare fino a che punto della pagina l'utente ha effettuato lo scorrimento:

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

La distancevariabile ora mantiene la distanza dalla parte superiore #my-elementdell'elemento e dalla piega superiore.

Ecco una demo: http://jsfiddle.net/Rxs2m/

Si noti che i valori negativi indicano che l'elemento si trova sopra la piega superiore.

Vaniglia:

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

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

   console.log(distanceToTop);
});

Apri la console del browser e scorri la pagina per vedere la distanza.

Ciò può essere ottenuto esclusivamente con JavaScript .

Vedo che la risposta che volevo scrivere ha ricevuto una risposta dalla lince nei commenti alla domanda.

Ma scriverò comunque una risposta perché, proprio come me, a volte le persone dimenticano di leggere i commenti.

Quindi, se vuoi solo ottenere la distanza di un elemento (in Pixel) dalla parte superiore della finestra dello schermo, ecco cosa devi fare:

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

usa getBoundingClientRect ()

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

Questo è tutto!

Spero che questo aiuti qualcuno :)

Ho usato questo:

                              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

codice:

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

Ho usato questa funzione per rilevare se l'elemento è visibile nella porta di visualizzazione

Codice:

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