getelementsbytagname javascript ejemplo

Determine la distancia desde la parte superior de un div a la parte superior de la ventana con javascript

Question

¿Cómo determino la distancia entre la parte superior de un div a la parte superior de la pantalla actual? Solo quiero la distancia de píxel a la parte superior de la pantalla actual, no la parte superior del documento. He intentado algunas cosas como .offset() y .offsetHeight , pero no puedo .offsetHeight mi cerebro a eso. ¡Gracias!

Answer 1

Esto se puede lograr puramente con JavaScript .

Veo que la respuesta que quería escribir ha sido respondida por lynx en comentarios a la pregunta.

Pero de todos modos voy a escribir la respuesta porque, al igual que yo, la gente a veces olvida leer los comentarios.

Por lo tanto, si solo desea obtener la distancia de un elemento (en píxeles) desde la parte superior de la ventana de su pantalla, esto es lo que debe hacer:

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

use getBoundingClientRect()

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

¡Eso es! Espero que ayude a alguien :)

Answer 2

Puede usar .offset() para obtener el desplazamiento en comparación con el elemento del document y luego usar la propiedad scrollTop del elemento de la window para encontrar qué tan abajo en la página el usuario se desplazó:

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

La variable de distance ahora contiene la distancia desde la parte superior del #my-element element y el pliegue superior.

Aquí hay una demostración: http://jsfiddle.net/Rxs2m/

Tenga en cuenta que los valores negativos significan que el elemento está arriba del pliegue superior.

Answer 3

Usé esto:

                              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

código:

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 4

Vainilla:

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

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

   console.log(distanceToTop);
});

Abra la consola de su navegador y recorra su página para ver la distancia.