¿Cómo puedo determinar la distancia entre la parte superior de un div a la parte superior de la pantalla actual? Sólo quiero que el píxel de la distancia a la parte superior de la pantalla actual, no de la parte superior del documento. Yo he probado un par de cosas como .offset() y .offsetHeight, pero simplemente no puedo envolver mi cabeza alrededor de ella. Gracias!

  • usted podría querer check this out
  • el.getBoundingClientRect().top+window.scrollY
  • Eh, es sólo el.getBoundingClientRect().top. La adición de la posición de desplazamiento se suma a la distancia a la parte superior del documento. developer.mozilla.org/de/docs/Web/API/Element/…
  • sí a la derecha, sólo quería unjquerify
InformationsquelleAutor Joel Eckroth | 2012-03-26

4 Comentarios

  1. 229

    Puede utilizar .offset() para obtener el desplazamiento en comparación con el document elemento y, a continuación, utilizar la scrollTop propiedad de la window elemento a buscar tan lejos hacia abajo de la página el usuario se ha desplazado:

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

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

    Aquí es un demo: http://jsfiddle.net/Rxs2m/

    Tenga en cuenta que los valores negativos significan que el elemento está por encima de la parte superior del pliegue.

    • ¿Cómo puedo comprobar si la distancia es un número específico? Quiero hacer un elemento pegajoso si es 120px distancia de la parte superior
    • Puede comprobar el distance variable para ver si su valor es 120, pero yo recomendaría la comprobación de un rango en lugar de un número exacto. Si, por ejemplo, desplazarse con la rueda del ratón, usted bien podría saltar más de 120. Así que si usted está tratando de aplicar un poco de CSS o algo cuando el elemento está dentro de 120px de la parte superior del pliegue, entonces tal vez de usar if (distance < 120) { /* do something */}. Aquí está una actualización de demostración: jsfiddle.net/na5qL91o
    • Un problema si hago esto: el pegajoso parte parpadea cuando me desplazo. Supongo que porque se vuelve a calcular cuando me desplazo. ¿Alguna idea de cómo solucionar este problema? Mi código: $(window).en(‘desplazamiento’, function () { var scrollTop = $(window).scrollTop(), elementOffset = $(‘#secundarios»).offset().la parte superior, distancia = (elementOffset – scrollTop); if (distancia < 120) { $(‘#secundarios»).addClass(‘pegajoso’); } else { $(‘#secundarios»).removeClass(‘pegajoso’); } });
  2. 51

    Vainilla:

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

    Abra su navegador de la consola y desplácese por la página para ver la distancia.

    • Esto sólo funciona si el usuario no ha desplazado la página. De lo contrario, distanceToTop devuelto es relativa (incluso puede ser negativo si el usuario se ha desplazado pasado). Para tomar esto en cuenta, el uso de window.pageYOffset + someDiv.getBoundingClientRect().top
    • El OP está buscando la distancia a la parte superior de la pantalla, no a la parte superior del documento – un valor negativo sería válida en este caso
  3. 12

    Esto puede lograrse puramente con JavaScript.

    Veo la respuesta que yo quería escribir, ha sido contestada por lince en los comentarios a la pregunta.

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

    Por lo tanto, si lo que desea es obtener un elemento de la distancia (en Píxeles) de la parte superior de la pantalla de la ventana, aquí es lo que usted necesita hacer:

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

    uso getBoundingClientRect()

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

    Eso es todo!

    La esperanza de que esto ayude a alguien 🙂

    • getBoundingClient() no funciona, en lugar .getBoundingClientRect()
    • Gracias por la sugerencia 🙂 he hecho los cambios pertinentes.
    • Simplemente impresionante el trabajo de @MohammedFurqanRahamathM. Muchas gracias por tu respuesta 🙂 funciona como un encanto !! 🙂
    • Gracias. Me alegro de que fue de ayuda 🙂
    • pero esto sólo funciona si uno no vuelve a cargar en el medio de la página de la derecha?
    • Yo no entendía. Podría usted por favor, pon tu pregunta?

  4. 6

    He usado este:

                                  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);
        });
        */
    • +1 para mostrar el elemento en cuestión.offsetTop existe. elemento.getBoundingClientRect().la parte superior me está dando un comportamiento extraño. Yo estaba buscando para obtener la distancia desde la parte superior de la página web hasta la parte superior del elemento.

Dejar respuesta

Please enter your comment!
Please enter your name here