Ermitteln Sie die Entfernung von der Spitze eines Div bis zum Anfang des Fensters mit Javascript

Question

Wie ermittle ich den Abstand zwischen der Spitze eines Div ganz oben auf dem aktuellen Bildschirm? Ich möchte nur den Pixelabstand zum oberen Bildschirmrand, nicht zum oberen Rand des Dokuments. Ich habe ein paar Dinge wie .offset() und .offsetHeight versucht, aber ich kann einfach nicht mein Gehirn um mich wickeln. Vielen Dank!

Answer 1

Sie .offset() verwenden können, um die im Vergleich zum document Element versetzt und dann die scrollTop Eigenschaft des window Element verwenden, wie weit unten auf der Seite der Benutzer gescrollt hat:

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

Die distance Variable jetzt hält den Abstand von der Oberseite des #my-element Elements und der oberen Falte. Hier

ist eine Demo: http://jsfiddle.net/Rxs2m/

Beachten Sie, dass negative Werte bedeuten, dass das Element über dem oberen-fach ist.

Answer 2

Ich habe diese:

       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 

Code:

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

Browser-Konsole öffnen und blättern Sie Ihre Seite um den Abstand zu sehen.