jQuery obtiene la ubicación de un elemento relativo a la ventana

Dado un ID de DOM HTML, ¿cómo obtener la posición de un elemento en relación con la ventana en JavaScript / JQuery? Esto no es lo mismo en relación con el documento ni el elemento primario desplazado, ya que el elemento puede estar dentro de un iframe u otros elementos. Necesito obtener la ubicación de la pantalla del rectángulo del elemento (como en posición y dimensión) como se muestra actualmente. Los valores negativos son aceptables si el elemento está actualmente fuera de la pantalla (se ha desplazado hacia afuera).

Esto es para una aplicación iPad (WebKit / WebView). Cada vez que el usuario toca un enlace especial en un UIWebView, se supone que debo abrir una vista emergente que muestra más información sobre el enlace. La vista emergente debe mostrar una flecha que apunte a la parte de la pantalla que la invoca.

Inicialmente, tome la posición .offset del elemento y calcule su posición relativa con respecto a la ventana

Consulte :
1. desplazamiento
2. desplazamiento
3. desplazamiento arriba

Puedes probarlo en este violín

Seguir unas pocas líneas de código explica cómo se puede resolver esto

cuando se realiza el evento .scroll , calculamos la posición relativa del elemento con respecto al objeto de ventana

$(window).scroll(function () {
    console.log(eTop - $(window).scrollTop());
});

cuando se realiza el desplazamiento en el navegador, llamamos a la función del controlador de eventos anterior

fragmento de código

function log(txt) {
  $("#log").html("location : <b>" + txt + "</b> px")
}

$(function() {
  var eTop = $('#element').offset().top; //get the offset top of the element
  log(eTop - $(window).scrollTop()); //position of the ele w.r.t window

  $(window).scroll(function() { //when window is scrolled
    log(eTop - $(window).scrollTop());
  });
});

#element {
  margin: 140px;
  text-align: center;
  padding: 5px;
  width: 200px;
  height: 200px;
  border: 1px solid #0099f9;
  border-radius: 3px;
  background: #444;
  color: #0099d9;
  opacity: 0.6;
}
#log {
  position: fixed;
  top: 40px;
  left: 40px;
  color: #333;
}
#scroll {
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: 1px solid #000;
  border-radius: 2px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>

<div id="element">Hello
  <hr>World</div>
<div id="scroll">Scroll Down</div>

Prueba el cuadro delimitador. Es sencillo:

var leftPos  = $("#element")[0].getBoundingClientRect().left   + $(window)['scrollLeft']();
var rightPos = $("#element")[0].getBoundingClientRect().right  + $(window)['scrollLeft']();
var topPos   = $("#element")[0].getBoundingClientRect().top    + $(window)['scrollTop']();
var bottomPos= $("#element")[0].getBoundingClientRect().bottom + $(window)['scrollTop']();

function getWindowRelativeOffset(parentWindow, elem) {
        var offset = {
            left : 0,
            top : 0
        };
        // relative to the target field's document
        offset.left = elem.getBoundingClientRect().left;
        offset.top = elem.getBoundingClientRect().top;
        // now we will calculate according to the current document, this current
        // document might be same as the document of target field or it may be
        // parent of the document of the target field
        var childWindow = elem.document.frames.window;
        while (childWindow != parentWindow) {
            offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
            offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
            childWindow = childWindow.parent;
        }
        return offset;
    };

puedes llamarlo asi

getWindowRelativeOffset(top, inputElement);

Me concentro en IE solo según mis requisitos, pero se puede hacer algo similar para otros navegadores

Esto suena más como si quisiera una información sobre herramientas para el enlace seleccionado. Hay muchas informaciones sobre herramientas de jQuery, pruebe jQuery qTip . Tiene muchas opciones y es fácil cambiar los estilos.

De lo contrario, si desea hacerlo usted mismo, puede usar jQuery .position(). Más información sobre .position()está en http://api.jquery.com/position/

$("#element").position(); devolverá la posición actual de un elemento en relación con el elemento primario desplazado.

También está el jQuery .offset (); que devolverá la posición relativa al documento.

TL; DR

headroom_by_jQuery = $('#id').offset().top - $(window).scrollTop();

headroom_by_DOM = $('#id')[0].getBoundingClientRect().top;   // if no iframe

.getBoundingClientRect () parece ser universal . .offset () y .scrollTop () han sido compatibles desde jQuery 1.2. Gracias @ user372551 y @prograhammer. Para usar DOM en un iframe, consulte la solución de @ ImranAnsari .

    function trbl(e, relative) {
            var r = $(e).get(0).getBoundingClientRect(); relative = $(relative);

            return {
                    t : r.top    + relative['scrollTop'] (),
                    r : r.right  + relative['scrollLeft'](),
                    b : r.bottom + relative['scrollTop'] (),
                    l : r.left   + relative['scrollLeft']() 

            }
    }

    // Example
    trbl(e, window);

Intente esto para obtener la ubicación de un elemento relativo a la ventana.

        $("button").click(function(){
            var offset = $("#simplebox").offset();
            alert("Current position of the box is: (left: " + offset.left + ", top: " + offset.top + ")");
        });

    #simplebox{
        width:150px;
        height:100px;
        background: #FBBC09;
        margin: 150px 100px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Get Box Position</button>
    <p><strong>Note:</strong> Play with the value of margin property to see how the jQuery offest() method works.</p>
    <div id="simplebox"></div>

Ver más @ Obtenga la posición de un elemento relativo al documento con jQuery