Bestimmen Sie mit JavaScript den Abstand vom oberen Rand eines „Div“ zum oberen Rand des Fensters

Question 1

Wie bestimme ich den Abstand zwischen dem oberen Rand eines Divs und dem oberen Rand des aktuellen Bildschirms?

Ich möchte nur den Pixelabstand zum oberen Rand des aktuellen Bildschirms, nicht zum oberen Rand des Dokuments. Ich habe ein paar Dinge ausprobiert, z .offset() Und .offsetHeightaber ich komme einfach nicht damit klar.

Question 2

Sie können verwenden .offset() um den Offset im Vergleich zum zu erhalten document Element und verwenden Sie dann das scrollTop Eigentum der window Element, um herauszufinden, wie weit der Benutzer auf der Seite nach unten gescrollt hat:

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

Der distance Die Variable enthält jetzt den Abstand vom oberen Rand des #my-element Element 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.

Question 3

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.

Question 4

Dies kann erreicht werden rein mit JavaScript.

Ich sehe, dass die Antwort, die ich schreiben wollte, von Lynx in den Kommentaren zur Frage beantwortet wurde.

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

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

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

verwenden 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 🙂

Question 5

Ich habe Folgendes verwendet:

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

Question 6

Ich habe diese Funktion verwendet, um zu erkennen, 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');
    }
});