javascript - por - ¿Cómo obtener la distancia desde la parte superior para un elemento?

formula para calcular distancia entre dos puntos geograficos

Question

Quiero saber cómo usar JavaScript para obtener la distancia de un elemento desde la parte superior de la página, no el elemento principal .

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

Answer 1

(FUENTE: Determine la distancia desde la parte superior de un div a la parte superior de la ventana con javascript )

<script type="text/javascript">
var myyElement = document.getElementById("myyy_bar");  //your element
var EnableConsoleLOGS = true;                          //to check the results in Browser''s Inspector(Console), whenever you are scrolling



// ==============================================
window.addEventListener(''scroll'', function (evt) {
    var Positionsss =  GetTopLeft ();  
    if (EnableConsoleLOGS) { console.log(Positionsss); }
});
function GetOffset (object, offset) {
    if (!object) return;
    offset.x += object.offsetLeft;       offset.y += object.offsetTop;
    GetOffset (object.offsetParent, offset);
}
function GetScrolled (object, scrolled) {
    if (!object) return;
    scrolled.x += object.scrollLeft;    scrolled.y += object.scrollTop;
    if (object.tagName.toLowerCase () != "html") {          GetScrolled (object.parentNode, scrolled);        }
}

function GetTopLeft () {
    var offset = {x : 0, y : 0};        GetOffset (myyElement, offset);
    var scrolled = {x : 0, y : 0};      GetScrolled (myyElement.parentNode, scrolled);
    var posX = offset.x - scrolled.x;   var posY = offset.y - scrolled.y;
    return {lefttt: posX , toppp: posY };
}
// ==============================================
</script>

Answer 2

Aquí hay un código interesante para ti :)

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>

Answer 3

Aunque es una discusión bastante antigua, pero esto funciona bastante bien en chrome / firefox / safari navegadores de chrome / firefox / safari :

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

Compruébalo en JSFiddle

Answer 4

Manera fácil de vainilla:

window.addEventListener(''scroll'', function() {
   var someDiv = document.getElementById(''someDiv'');
   var distanceToTop = someDiv.getBoundingClientRect().top;
});

Answer 5

Usando el método de jQuery''s offset() :

$(element).offset().top

Ejemplo: http://jsfiddle.net/yZGSt/3/

Answer 6

Use offsetTop

document.getElementById("foo").offsetTop

Demo

Answer 7

offsetTop solo mira el elemento principal del elemento. Simplemente recorra los nodos principales hasta que se quede sin padres y sume sus compensaciones.

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

Answer 8

document.querySelector(''your-element'').getBoundingClientRect().top

En mi experiencia, document.body.scrollTop no siempre devuelve la posición de desplazamiento actual (por ejemplo, si el desplazamiento realmente ocurre en un elemento diferente).

Answer 9

var distanceTop = element.getBoundingClientRect().top;

Para más detalles, visite un enlace:

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