jQuery pobiera lokalizację elementu względem okna

Question

jQuery pobiera lokalizację elementu względem okna

Biorąc pod uwagę HTML DOM ID, jak uzyskać pozycję elementu względem okna w JavaScript / JQuery? Nie jest to to samo co related do dokumentu ani offset rodzica, ponieważ element może znajdować się wewnątrz ramki iframe lub innych elementów. Muszę uzyskać położenie prostokąta elementu na ekranie (jak w pozycji i wymiarze), tak jak jest on obecnie wyświetlany. Wartości ujemne są dopuszczalne, jeśli element jest obecnie poza ekranem(został wyłączony).

To jest dla aplikacja iPad (WebKit / WebView). Za każdym razem, gdy użytkownik dotknie specjalnego linku w UIWebView, powinienem otworzyć widok popover, który wyświetla dalsze informacje o linku. Widok popover musi wyświetlać strzałkę skierowaną z powrotem do części ekranu, która ją wywołuje.

150

javascript jquery ipad webkit webview

Author: Mark Amery, 2010-09-15

Source

7 answers

Spróbuj obwiedni. To proste:

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']();

55

Author: prograhammer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-19 03:56:40

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

Możesz to tak nazwać

getWindowRelativeOffset(top, inputElement);

Skupiam się tylko na IE zgodnie z moimi wymaganiami, ale podobne można zrobić dla innych przeglądarek

6

Author: Imran Ansari,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-25 07:25:52

To brzmi bardziej, jakbyś chciał podpowiedź dla wybranego łącza. Istnieje wiele podpowiedzi jQuery, wypróbuj jQuery qTip . Ma wiele opcji i łatwo jest zmienić style.

W przeciwnym razie, jeśli chcesz to zrobić samemu, możesz użyć jQuery .position(). Więcej informacji o .position() znajduje się na http://api.jquery.com/position/

$("#element").position(); zwróci bieżącą pozycję elementu względem elementu nadrzędnego offsetu.

Jest też jQuery .offset (); , która zwróci pozycję względem dokumentu.

4

Author: jhanifen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-12 13:32:37

TL; DR

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

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

.getBoundingClientRect () wydaje się być uniwersalnym . .offset () i .scrollTop () są obsługiwane od wersji jQuery 1.2. Dzięki @ user372551 i @ prograhammer. Aby użyć DOM w ramce iframe zobacz @ imranansari ' s solution .

3

Author: Bob Stein,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-08 14:12:06

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

0

Author: momo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-12 08:18:18

Spróbuj uzyskać położenie elementu względem okna.

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

Zobacz więcej @ uzyskaj pozycję elementu względem dokumentu za pomocą jQuery

0

Author: Ketan Savaliya,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-29 13:21:00

score 243 · Accepted Answer

Początkowo, chwycić .offset pozycja elementu i obliczyć jego względną pozycję względem Okna

Refer :
1. offset
2. scroll
3. scrollTop

Możesz spróbować w tym fiddle

Kilka linijek kodu wyjaśnia, jak można to rozwiązać

Kiedy .przewiń zdarzenie jest wykonywane, obliczamy względna pozycja elementu względem obiektu window

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

Gdy przewijanie jest wykonywane w przeglądarce, wywołujemy powyższą funkcję obsługi zdarzeń

Fragment kodu

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>