jQuery ottiene la posizione di un elemento rispetto alla finestra

Dato un ID DOM HTML, come ottenere la posizione di un elemento rispetto alla finestra in JavaScript / JQuery? Questo non è uguale a quello relativo al documento né all'offset genitore poiché l'elemento potrebbe trovarsi all'interno di un iframe o di alcuni altri elementi. Ho bisogno di ottenere la posizione dello schermo del rettangolo dell'elemento (come in posizione e dimensione) come viene attualmente visualizzato. I valori negativi sono accettabili se l'elemento è attualmente fuori dallo schermo (sono stati fatti scorrere fuori).

Questo è per un'applicazione iPad (WebKit / WebView). Ogni volta che l'utente tocca un collegamento speciale in un UIWebView, dovrei aprire una vista popover che visualizza ulteriori informazioni sul collegamento. La vista popover deve mostrare una freccia che punta indietro verso la parte dello schermo che la richiama.

Inizialmente, prendi la posizione .offset dell'elemento e calcola la sua posizione relativa rispetto alla finestra

Consultare :
1. offset
2. scroll
3. scrollTop

Puoi provarlo in questo violino

Di seguito alcune righe di codice spiega come risolvere questo problema

quando viene eseguito l'evento .scroll , calcoliamo la posizione relativa dell'elemento rispetto all'oggetto finestra

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

quando lo scorrimento viene eseguito nel browser, chiamiamo la funzione del gestore di eventi sopra

snippet di codice

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>

Prova il rettangolo di selezione. È semplice:

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

puoi chiamarlo così

getWindowRelativeOffset(top, inputElement);

Mi concentro su IE solo secondo le mie esigenze, ma è possibile fare simile per altri browser

Sembra più che tu voglia una descrizione del collegamento selezionato. Esistono molti suggerimenti jQuery, prova jQuery qTip . Ha molte opzioni ed è facile cambiare gli stili.

Altrimenti, se vuoi farlo da solo, puoi usare jQuery .position(). Maggiori informazioni su .position()sono su http://api.jquery.com/position/

$("#element").position(); restituirà la posizione corrente di un elemento rispetto al genitore offset.

C'è anche jQuery .offset (); che restituirà la posizione relativa al documento.

TL; DR

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

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

.getBoundingClientRect () sembra essere universale . .offset () e .scrollTop () sono supportati da jQuery 1.2. Grazie @ user372551 e @prograhammer. Per usare DOM in un iframe, vedi la soluzione di @ 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);

Prova questo per ottenere la posizione di un elemento rispetto alla finestra.

        $("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>

Scopri di più @ Ottieni la posizione di un elemento rispetto al documento con jQuery