jQuery mendapatkan lokasi elemen relatif ke jendela

Diberikan ID DOM HTML, bagaimana cara mendapatkan posisi elemen relatif ke jendela di JavaScript / JQuery? Ini tidak sama dengan relatif terhadap dokumen atau offset induk karena elemen mungkin di dalam iframe atau elemen lainnya. Saya perlu mendapatkan lokasi layar persegi panjang elemen (seperti dalam posisi dan dimensi) seperti yang sedang ditampilkan. Nilai-nilai negatif dapat diterima jika elemen saat ini di luar layar (telah digulirkan).

Ini untuk aplikasi iPad (WebKit / WebView). Setiap kali pengguna mengetuk tautan khusus dalam UIWebView, saya seharusnya membuka tampilan popover yang menampilkan informasi lebih lanjut tentang tautan tersebut. Tampilan popover perlu menampilkan panah yang menunjuk kembali ke bagian layar yang memanggilnya.

Awalnya, ambil posisi .offset elemen dan hitung posisi relatifnya sehubungan dengan jendela

Lihat :
1. offset
2. gulir
3. scrollTop

Anda bisa mencobanya di biola ini

Mengikuti beberapa baris kode menjelaskan bagaimana ini dapat diselesaikan

ketika acara .scroll dilakukan, kami menghitung posisi relatif elemen sehubungan dengan objek jendela

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

ketika gulir dilakukan di browser, kami memanggil fungsi event handler di atas

cuplikan kode

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>

Coba kotak pembatas. Itu mudah:

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

Anda bisa menyebutnya seperti ini

getWindowRelativeOffset(top, inputElement);

Saya fokus untuk IE hanya sesuai kebutuhan saya tetapi serupa dapat dilakukan untuk browser lain

Ini terdengar seperti Anda ingin tooltip untuk tautan yang dipilih. Ada banyak tooltips jQuery, cobalah qtip jQuery . Ini memiliki banyak pilihan dan mudah untuk mengubah gaya.

Kalau tidak, jika Anda ingin melakukan ini sendiri, Anda dapat menggunakan jQuery .position(). Informasi lebih lanjut tentang .position()ada di http://api.jquery.com/position/

$("#element").position(); akan mengembalikan posisi elemen saat ini ke induk offset.

Ada juga jQuery .offset (); yang akan mengembalikan posisi relatif ke dokumen.

TL; DR

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

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

.getBoundingClientRect () tampaknya bersifat universal . .offset () dan .scrollTop () telah didukung sejak jQuery 1.2. Terima kasih @ user372551 dan @prograhammer. Untuk menggunakan DOM dalam iframe lihat solusi @ 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);

Coba ini untuk mendapatkan lokasi elemen relatif ke jendela.

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

Lihat lebih lanjut @ Dapatkan posisi elemen relatif ke dokumen dengan jQuery