jQuery รับตำแหน่งขององค์ประกอบที่สัมพันธ์กับหน้าต่าง

ได้รับ ID DOM HTML, วิธีการรับตำแหน่งขององค์ประกอบที่เกี่ยวข้องกับหน้าต่างใน JavaScript / JQuery? สิ่งนี้ไม่เหมือนกับความสัมพันธ์กับเอกสารหรือพาเรนต์ออฟเซ็ตเนื่องจากองค์ประกอบอาจอยู่ใน iframe หรือองค์ประกอบอื่น ๆ ฉันต้องการรับตำแหน่งหน้าจอของสี่เหลี่ยมขององค์ประกอบ (ตามตำแหน่งและมิติ) ตามที่มันถูกแสดงอยู่ในปัจจุบัน ค่าลบสามารถยอมรับได้หากองค์ประกอบอยู่นอกจอ (เลื่อนออกไปแล้ว)

นี่สำหรับแอปพลิเคชัน iPad (WebKit / WebView) เมื่อใดก็ตามที่ผู้ใช้แตะที่ลิงค์พิเศษในUIWebViewฉันควรจะเปิดมุมมองป๊อปโอเวอร์ที่แสดงข้อมูลเพิ่มเติมเกี่ยวกับลิงค์ มุมมองป๊อปโอเวอร์จำเป็นต้องแสดงลูกศรที่ชี้กลับไปยังส่วนของหน้าจอที่เรียกใช้

เริ่มแรกรับตำแหน่ง. offsetขององค์ประกอบและคำนวณตำแหน่งที่สัมพันธ์กับหน้าต่าง

อ้างอิง :
1. offset
2. scroll
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 qTipqTip มันมีตัวเลือกมากมายและง่ายต่อการเปลี่ยนสไตล์

มิฉะนั้นถ้าคุณต้องการที่จะทำเช่นนี้ด้วยตัวคุณเองคุณสามารถใช้ .position()jQuery ข้อมูลเพิ่มเติมเกี่ยวกับ.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 ()ดูเหมือนจะเป็นสากล .offset ()และ. scrollTop ()ได้รับการสนับสนุนตั้งแต่ jQuery 1.2 ขอบคุณ @ user372551 และ @prograhammer หากต้องการใช้ DOM ใน iframe ดู@ วิธีการแก้ปัญหาของ

    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