jQuery는 창을 기준으로 요소의 위치를 ​​가져옵니다.

HTML DOM ID가 주어지면 JavaScript / JQuery에서 창을 기준으로 요소의 위치를 ​​얻는 방법은 무엇입니까? 요소가 iframe 또는 다른 요소 내에있을 수 있기 때문에 이것은 문서 또는 오프셋 부모와 관련하여 동일하지 않습니다. 현재 표시되는 요소 사각형의 화면 위치 (위치 및 치수)를 가져와야합니다. 요소가 현재 화면 밖 (스크롤 오프) 인 경우 음수 값을 사용할 수 있습니다.

iPad (WebKit / WebView) 응용 프로그램 용입니다. 사용자가의 특수 링크를 탭할 때마다 링크에 대한 UIWebView추가 정보를 표시하는 팝 오버보기를 열어야합니다. 팝 오버보기는이를 호출하는 화면 부분을 가리키는 화살표를 표시해야합니다.

처음에는 요소 의 오프셋 위치를 잡고 창을 기준으로 상대 위치를 계산하십시오.

참조 :
1. 오프셋
2. 스크롤
3. scrollTop

이 바이올린 에서 시도해 볼 수 있습니다

몇 줄의 코드를 따르면 어떻게 해결할 수 있는지 설명합니다.

경우 .scroll 이벤트가 수행되고, 우리는 윈도우 오브젝트에 대한 요소의 상대적 위치를 계산

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

브라우저에서 스크롤이 수행되면 위의 이벤트 핸들러 함수를 호출합니다.

코드 스 니펫

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>

경계 상자를 사용해보십시오. 간단 해:

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

당신은 이것을 이렇게 부를 수 있습니다

getWindowRelativeOffset(top, inputElement);

내 요구 사항에 따라 IE에만 ​​집중하지만 다른 브라우저에서도 비슷하게 수행 할 수 있습니다.

링크에 대한 툴팁을 원하는 것처럼 들립니다. 많은 jQuery 툴팁이 있습니다 . jQuery qTip을 사용해보십시오 . 많은 옵션이 있으며 스타일을 쉽게 변경할 수 있습니다.

그렇지 않으면 직접 수행하려는 경우 jQuery를 사용할 수 있습니다 .position(). 자세한 정보 .position()는 http://api.jquery.com/position/에 있습니다.

$("#element").position(); 오프셋 부모를 기준으로 요소의 현재 위치를 반환합니다.

jQuery도 있습니다. .offset (); 문서와 관련된 위치를 반환합니다.

TL; DR

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

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

.getBoundingClientRect () 는 보편적 인 것으로 보입니다 . jQuery 1.2부터 .offset () 및 .scrollTop () 이 지원되었습니다. @ user372551과 @prograhammer에게 감사드립니다. iframe에서 DOM을 사용하려면 @ ImranAnsari 's solution을 참조하십시오 .

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

창을 기준으로 요소의 위치를 ​​얻으려면 이것을 시도하십시오.

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

더보기 @ jQuery를 사용하여 문서와 관련된 요소의 위치 가져 오기