HTML DOM bir KİMLİK verilir, nasıl bir eleman pozisyonu JavaScript/pencereye göre almak için bir WordPress kullanmak? Bu eleman bir iframe veya diğer bazı unsurları içinde olabileceğinden belge ne de uzaklık üst göreli olarak aynı değildir. Şu anda görüntülenen olarak elemanın dikdörtgen (konum ve boyut) ekran yer almak istiyorum. Negatif değerler ise öğe şu anda kapalı ekran (kaydırılan kapalı) ise kabul edilebilir.

Bu (web görünümü ve aynı zamanda Y/) iPad için bir uygulama. Kullanıcı ** 6, özel bir bağlantı muslukları her bağlantı hakkında daha fazla bilgi görüntüler popover bir görünüm açmak gerekiyor. Popover görünümü çağıran ekranın bir bölümünü geri işaret eden bir ok sergilemek gerekiyor.

Başlangıçta, öğe .offset pozisyon alıp pencere saygı ile ilişkili konumunu hesaplamak

Bakın:< / ^ br . 1. offset< / ^ br . 2. scroll< / ^ br . 3. scrollTop< / ^ br .

Bunu bir deneyin bu verebilirsinfiddle

Nasıl çözülebilir bu kod birkaç satır aşağıdaki açıklıyor

.scroll olay gerçekleştirildiğinde, pencere nesne ile ilgili eleman göreli konumunu hesaplamak

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

tarayıcıda kaydırma yapıldığında, yukarıdaki olay işleyicisi işlevi diyoruz

kod parçacığını

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>