Utilisation de jquery pour obtenir de l'élément de position par rapport à la fenêtre d'affichage

Question

Quelle est la bonne façon d'obtenir la position d'un élément sur la page par rapport à la fenêtre d'affichage (plutôt que le document).

offsety/x semblait prometteur:

http://docs.jquery.com/CSS/offset

Mais c'est par rapport au document. Est-t-il un équivalent de la méthode qui retourne les décalages par rapport à la fenêtre d'affichage?

Answer 1

La façon la plus simple pour déterminer la taille et la position d'un élément est l'appel de son getBoundingClientRect() méthode. Cette méthode retourne l'élément de positions dans la fenêtre d'affichage des coordonnées. Il s'attend à aucun des arguments et retourne un objet avec propriétés à gauche, à droite, en hautet en bas. Les propriétés left et top donner les coordonnées X et Y coordonnées du coin supérieur gauche de l'élément et de la droite et du bas des propriétés donner les coordonnées du coin inférieur droit.

element.getBoundingClientRect(); // Get position in viewport coordinates

Pris en charge partout.

Answer 2

Voici deux fonctions pour obtenir la hauteur de la page et de la faire défiler les montants (x,y) sans l'utilisation de l' (gonflé) dimensions du plugin:

// getPageScroll() by quirksmode.com
function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
      yScroll = self.pageYOffset;
      xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
      yScroll = document.documentElement.scrollTop;
      xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
      yScroll = document.body.scrollTop;
      xScroll = document.body.scrollLeft;
    }
    return new Array(xScroll,yScroll)
}

// Adapted from getPageSize() by quirksmode.com
function getPageHeight() {
    var windowHeight
    if (self.innerHeight) { // all except Explorer
      windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
      windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
      windowHeight = document.body.clientHeight;
    }
    return windowHeight
}

Answer 3

Regardez dans les Dimensions plugin, plus précisément scrollTop()/scrollLeft(). D'informations peuvent être trouvées à l' http://api.jquery.com/scrollTop.

Answer 4

J'ai trouvé que la réponse par cballou n'était plus de travail dans Firefox comme de Janv. 2014. Plus précisément, if (self.pageYOffset) ne se déclenche pas si le client a un défilement à droite, mais pas parce qu' 0 est un falsey nombre. Cela se passait inaperçue pendant un certain temps parce que Firefox pris en charge document.body.scrollLeft/Top, mais ce n'est plus de travail pour moi (sur Firefox 26.0).

Voici ma solution modifiée:

var getPageScroll = function(document_el, window_el) {
  var xScroll = 0, yScroll = 0;
  if (window_el.pageYOffset !== undefined) {
    yScroll = window_el.pageYOffset;
    xScroll = window_el.pageXOffset;
  } else if (document_el.documentElement !== undefined && document_el.documentElement.scrollTop) {
    yScroll = document_el.documentElement.scrollTop;
    xScroll = document_el.documentElement.scrollLeft;
  } else if (document_el.body !== undefined) {// all other Explorers
    yScroll = document_el.body.scrollTop;
    xScroll = document_el.body.scrollLeft;
  }
  return [xScroll,yScroll];
};

Testé et de travail dans FF26, Chrome 31, IE11. Presque certainement travaille sur une version plus ancienne de toutes.