jQuery ermittelt die Position eines Elements relativ zum Fenster

Wie kann bei einer gegebenen HTML-DOM-ID die Position eines Elements relativ zum Fenster in JavaScript / JQuery ermittelt werden? Dies ist nicht dasselbe wie relativ zum Dokument oder zum übergeordneten Versatz, da sich das Element möglicherweise innerhalb eines Iframes oder einiger anderer Elemente befindet. Ich muss die Bildschirmposition des Rechtecks ​​des Elements (in Position und Bemaßung) ermitteln, wie es gerade angezeigt wird. Negative Werte sind akzeptabel, wenn sich das Element derzeit außerhalb des Bildschirms befindet (wurde gescrollt).

Dies ist für eine iPad-Anwendung (WebKit / WebView). Immer wenn der Benutzer auf einen speziellen Link in einem tippt UIWebView, soll ich eine Popover-Ansicht öffnen, in der weitere Informationen zum Link angezeigt werden. In der Popover-Ansicht muss ein Pfeil angezeigt werden, der auf den Teil des Bildschirms verweist, der ihn aufruft.

Nehmen Sie zunächst die Versatzposition des Elements und berechnen Sie seine relative Position in Bezug auf das Fenster

Siehe :
1. Offset
2. blättern
3. scrollTop

Sie können es mit dieser Geige versuchen

In den folgenden Codezeilen wird erläutert, wie dies gelöst werden kann

Wenn das Ereignis .scroll ausgeführt wird, berechnen wir die relative Position des Elements in Bezug auf das Fensterobjekt

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

Wenn im Browser gescrollt wird, rufen wir die obige Ereignishandlerfunktion auf

Code-Auszug

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>

Probieren Sie den Begrenzungsrahmen aus. Es ist einfach:

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

Sie können es so nennen

getWindowRelativeOffset(top, inputElement);

Ich konzentriere mich nur für den IE gemäß meiner Anforderung, aber ähnliche können für andere Browser durchgeführt werden

Dies klingt eher so, als ob Sie einen Tooltip für den ausgewählten Link wünschen. Es gibt viele jQuery-Tooltips. Probieren Sie jQuery qTip aus . Es hat viele Optionen und ist einfach, die Stile zu ändern.

Andernfalls können Sie die jQuery verwenden, wenn Sie dies selbst tun möchten .position(). Weitere Informationen finden Sie .position()unter http://api.jquery.com/position/

$("#element").position(); gibt die aktuelle Position eines Elements relativ zum übergeordneten Versatz zurück.

Es gibt auch die jQuery .offset (); Dadurch wird die Position relativ zum Dokument zurückgegeben.

TL; DR

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

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

.getBoundingClientRect () scheint universell zu sein . .offset () und .scrollTop () werden seit jQuery 1.2 unterstützt. Vielen Dank an @ user372551 und @prograhammer. Informationen zur Verwendung von DOM in einem Iframe finden Sie in der Lösung von @ 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);

Versuchen Sie dies, um die Position eines Elements relativ zum Fenster zu ermitteln.

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

Weitere Informationen @ Ermitteln Sie mit jQuery die Position eines Elements relativ zum Dokument