Wie bekomme ich den Abstand von oben für ein Element?

Question 1

Ich möchte wissen, wie man JavaScript verwendet, um die Entfernung eines Elements zu erhalten oben auf der Seite, nicht das übergeordnete Element.

http://jsfiddle.net/yZGSt/1/

Question 2

var elDistanceToTop = window.pageYOffset + el.getBoundingClientRect().top

Durch meine Erfahrung document.body.scrollTop gibt nicht immer die aktuelle Bildlaufposition zurück (z. B. wenn das Bildlauf tatsächlich auf einem anderen Element stattfindet).

Question 3

offsetTop betrachtet nur das übergeordnete Element des Elements. Gehen Sie einfach durch die Elternknoten, bis Sie keine Eltern mehr haben, und addieren Sie ihre Offsets.

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }

    return { x: xPosition, y: yPosition };
}

UPDATE: Diese Antwort hat einige Probleme, die Werte weisen winzige Unterschiede zu dem auf, was sie sein sollten, und funktionieren in einigen Fällen nicht richtig.

Prüfen @eeglbalazs‘s Antwort, die korrekt ist.

Question 4

Hier ist ein interessanter Code für Sie 🙂

window.addEventListener('load', function() {
  //get the element
  var elem = document.getElementById('test');
  //get the distance scrolled on body (by default can be changed)
  var distanceScrolled = document.body.scrollTop;
  //create viewport offset object
  var elemRect = elem.getBoundingClientRect();
  //get the offset from the element to the viewport
  var elemViewportOffset = elemRect.top;
  //add them together
  var totalOffset = distanceScrolled + elemViewportOffset;
  //log it, (look at the top of this example snippet)
  document.getElementById('log').innerHTML = totalOffset;
});

#test {
  width: 100px;
  height: 100px;
  background: red;
  margin-top: 100vh;
}
#log {
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  background: #333;
  color: #fff;
}
html,
body {
  height: 2000px;
  height: 200vh;
}

<div id="log"></div>
<div id="test"></div>

Question 5

Verwenden offsetTop

document.getElementById("foo").offsetTop

Demo

Question 6

offsetTop erhält nicht den Abstand zum oberen Rand der Seite, sondern zum oberen Rand des nächsten übergeordneten Elements, das eine bestimmte Position hat.

Sie können eine einfache Technik verwenden, bei der offsetTop aller übergeordneten Elemente des Elements, an dem Sie interessiert sind, addiert wird, um den Abstand zu ermitteln.

// Our element
var elem = document.querySelector('#some-element');

// Set our distance placeholder
var distance = 0;

// Loop up the dom
do {
    // Increase our distance counter
    distance += elem.offsetTop;

    // Set the element to it's parent
    elem = elem.offsetParent;

} while (elem);
distance = distance < 0 ? 0 : distance;

Originalcode von https://gomakethings.com/how-to-get-an-elements-distance-from-the-top-of-the-page-with-vanilla-javascript/

Question 7

Dieser Oneliner scheint gut zu funktionieren

document.getElementById("el").getBoundingClientRect().top +  window.scrollY

Ihre Geige aktualisiert

Question 8

var distanceTop = element.getBoundingClientRect().top;

Für Details besuchen Sie einen Link:

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect