jQuery obtenir l’emplacement d’un élément par rapport à la fenêtre

Question

Étant donné un DOM HTML ID, comment obtenir un élément de la position par rapport à la fenêtre en JavaScript/JQuery? Ce n'est pas le même que par rapport au document, ni de décalage parent depuis l'élément peut être à l'intérieur d'une iframe ou de certains autres éléments. J'ai besoin de pour obtenir l'écran emplacement de l'élément du rectangle (comme dans la position et dimension) comme il est actuellement à l'affiche. Les valeurs négatives sont acceptables si l'élément est actuellement hors de l'écran (avoir fait défiler off).

C'est pour un iPad (WebKit / WebView) de l'application. Chaque fois que l'utilisateur clique sur un lien dans un UIWebView, je suis censé ouvrir une fenêtre pop-over de la vue qui affiche des informations supplémentaires sur le lien. La liste doit afficher une flèche qui pointe vers la partie de l'écran qui l'invoque.

Answer 1

D'abord, Prenez le .décalage de la position de l'élément et de le calculer la position relative par rapport à la fenêtre

Consulter :
1. décalage
2. faites défiler jusqu'
3. scrollTop

Vous pouvez lui donner un essai http://jsbin.com/ebodi4

Suite à quelques lignes de code explique comment ce problème peut être résolu

$(function() {
  var eTop = $('element').offset().top; //get the offset top of the element
  console.log(eTop - $(window).scrollTop()); //position of the ele w.r.t window

  $(window).scroll(function() { //when window is scrolled
     console.log(eTop  - $(window).scrollTop());
  });
});

lors de l' .faites défiler l'événement est effectuée, nous calculons la position relative de l'élément par rapport à l'objet window

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

lorsque le défilement est exécuté dans le navigateur, nous appelons la fonction de gestionnaire d'événement ci-dessus

Answer 2

<pre><code></code><p>On peut appeler ça comme ça</p><p>getWindowRelativeOffset (albums, inputElement) ;</p><p>Je me concentre pour IE uniquement selon les directives de mon accent, mais similaire peut être fait ennemi autres navigateurs</p></pre>

Answer 3

Ceci ressemble plus à vous souhaitez une info-bulle pour le lien sélectionné. Il y a beaucoup de jQuery tooltips, essayer de jQuery qTip. Il a beaucoup d'options et il est facile de changer les styles.

Sinon, si vous voulez le faire vous-même, vous pouvez utiliser le jQuery .position(). Plus d'infos sur l' .position() est sur http://api.jquery.com/position/

$("#element").position(); sera de retour la position actuelle d'un élément par rapport à l'offset parent.

Il y a aussi le jQuery .offset(); qui retourne la position par rapport au document.