web-dev-qa-db-fra.com

jQuery récupère l'emplacement d'un élément par rapport à window

Avec un ID DOM HTML, comment obtenir la position d'un élément par rapport à la fenêtre dans JavaScript/JQuery? Ce n'est pas la même chose que relative au document ni au parent décalé puisque l'élément peut se trouver à l'intérieur d'une iframe ou de certains autres éléments. J'ai besoin d'obtenir l'emplacement de l'écran du rectangle de l'élément (comme dans la position et la dimension) tel qu'il est actuellement affiché. Les valeurs négatives sont acceptables si l'élément est actuellement hors écran (a été désactivé).

Ceci est pour une application iPad (WebKit/WebView). Chaque fois que l'utilisateur appuie sur un lien spécial dans une UIWebView, je suis censé ouvrir une vue contextuelle qui affiche des informations supplémentaires sur le lien. La vue contextuelle doit afficher une flèche qui pointe vers la partie de l'écran qui l'invoque.

javascriptjqueryipadwebkitwebview
160
adib

Dans un premier temps, récupérez la position .offset de l'élément et calculez sa position relative par rapport à la fenêtre.

Référer :
1. décalage
2. faire défiler
3. scrollTop

Vous pouvez essayer ceci FIDDLE

Suivre quelques lignes de code explique comment résoudre ce problème

lorsqu’un événement .scroll est exécuté, 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 effectué dans le navigateur, nous appelons la fonction de gestionnaire d’événements ci-dessus

extrait de code

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>

253
user372551

Essayez le cadre de sélection. C'est simple:

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']();
63
prograhammer
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;
    };

vous pouvez l'appeler comme ça

getWindowRelativeOffset(top, inputElement);

Je me concentre sur IE uniquement selon mes besoins, mais il en va de même pour d'autres navigateurs

6
Imran Ansari

Cela ressemble plus à ce que vous souhaitiez une info-bulle pour le lien sélectionné. Il existe de nombreuses infobulles jQuery, essayez jQuery qTip . Il a beaucoup d'options et il est facile de changer les styles.

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

$("#element").position(); renverra la position actuelle d'un élément par rapport au parent décalé.

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

4
jhanifen

TL; DR

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

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

.getBoundingClientRect () semble être universel . .offset () et .scrollTop () ont été pris en charge depuis jQuery 1.2. Merci @ user372551 et @prograhammer. Pour utiliser DOM dans une iframe, voir @ Solution d'ImranAnsari .

3
Bob Stein

Essayez ceci pour obtenir l'emplacement d'un élément par rapport à 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>

En savoir plus @ Obtenir la position d'un élément par rapport au document avec jQuery

1
Ketan Savaliya
    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);
1
momomo