wake-up-neo.com

jQuery ruft die Position eines Elements relativ zum Fenster ab

Wie erhält man bei einer HTML-DOM-ID in JavaScript/JQuery die Position eines Elements relativ zum Fenster? Dies ist nicht gleichbedeutend mit dem Dokument oder dem übergeordneten Versatz, da sich das Element in einem iframe oder einigen anderen Elementen befinden kann. Ich muss die Bildschirmposition des Rechtecks ​​des Elements (wie in Position und Dimension) ermitteln, während es gerade angezeigt wird. Negative Werte sind zulässig, wenn das Element gerade nicht auf dem Bildschirm ist (gescrollt wurde).

Dies ist für eine iPad-Anwendung (WebKit/WebView). Immer wenn der Benutzer in einer UIWebView auf einen speziellen Link tippt, sollte 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.

160
adib

Ergreifen Sie zunächst die Position .offset des Elements und berechnen Sie die relative Position in Bezug auf das Fenster

Verweisen :
1. Versatz
2. scrollen
3. scrollTop

Sie können es ausprobieren Geige

Nachfolgend einige Codezeilen erläutert, wie dies gelöst werden kann

wenn .scroll event 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 ein Bildlauf ausgeführt wird, rufen wir die obige Ereignisbehandlungsfunktion 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>

253
user372551

Versuchen Sie es mit dem Begrenzungsrahmen. 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']();
63
prograhammer
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 für IE nur gemäß meiner Anforderung, aber bei anderen Browsern ist das ähnlich

6
Imran Ansari

Das klingt mehr nach einem Tooltip für den ausgewählten Link. Es gibt viele jQuery-QuickInfos. Probieren Sie jQuery qTip aus. Es hat viele Optionen und es ist einfach, die Stile zu ändern.

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

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

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

4
jhanifen

TL; DR

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

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

.getBoundingClientRect () scheint zu sein - universal . .offset () und .scrollTop () werden seit jQuery 1.2 unterstützt. Danke @ user372551 und @prograhammer. Um DOM in einem iframe zu verwenden, siehe @ ImranAnsaris Lösung .

3
Bob Stein

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>

Mehr dazu @ Mit jQuery die Position eines Elements relativ zum Dokument ermitteln

1
Ketan Savaliya
    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);
1
momomo