Bestimmen Sie den Abstand vom oberen Rand eines Div zum oberen Rand des Fensters mit Javascript

Wie bestimme ich den Abstand zwischen dem oberen Rand eines Div und dem oberen Rand des aktuellen Bildschirms? Ich möchte nur den Pixelabstand zum oberen Rand des aktuellen Bildschirms und nicht zum oberen Rand des Dokuments. Ich habe ein paar Dinge wie .offset()und ausprobiert .offsetHeight, aber ich kann mein Gehirn einfach nicht darum wickeln. Vielen Dank!

Sie können .offset()den Versatz im Vergleich zum documentElement abrufen und dann mithilfe der scrollTopEigenschaft des windowElements ermitteln, wie weit der Benutzer auf der Seite gescrollt hat:

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

Die distanceVariable enthält jetzt den Abstand von der Oberseite des #my-elementElements und der oberen Falte.

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

Beachten Sie, dass negative Werte bedeuten, dass sich das Element über der oberen Falte befindet.

Vanille:

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

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

   console.log(distanceToTop);
});

Öffnen Sie Ihre Browserkonsole und scrollen Sie auf Ihrer Seite, um die Entfernung anzuzeigen.

Dies kann nur mit JavaScript erreicht werden .

Ich sehe, dass die Antwort, die ich schreiben wollte, von Luchs in Kommentaren zu der Frage beantwortet wurde .

Aber ich werde trotzdem eine Antwort schreiben, weil die Leute genau wie ich manchmal vergessen, die Kommentare zu lesen.

Wenn Sie also nur den Abstand eines Elements (in Pixel) vom oberen Rand Ihres Bildschirmfensters abrufen möchten, müssen Sie Folgendes tun:

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

benutze getBoundingClientRect ()

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

Das ist es!

Hoffe das hilft jemandem :)

Ich habe das benutzt:

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

Ich habe diese Funktion verwendet, um festzustellen, ob das Element im Ansichtsfenster sichtbar ist

Code:

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