Comment trouver la position 'relative' d'un élément à son élément parent? Ou: Comment trouver M. Blue?

J'ai 2 éléments div. Le premier est un défilement de conteneur et le second est un élément qui est placé dans le récipient. Je voudrais trouver la position en y par rapport à la vitesse de défilement du conteneur. J'ai emballé le tout dans un morceau de l'exemple de code intitulé Comment trouver Monsieur Bleu?

<div style="height:100px; border:solid 1px black; overflow-y:scroll;">
    Please scroll down...
    <br/>
    <div style="height:400px;">
    </div>
    <br/>
    <div id="MrBlue" style="height:20px; background-color:blue; color:white">
        Mr. Blue
    </div>
</div>

Donc je voudrais un JavaScript /jQuery déclaration que les alertes de la vertical position de la Monsieur Bleu. div relative pour le défilement du conteneur.

Ps. Si vous souhaitez "violon" avec monsieur. Bleu, vérifiez http://jsfiddle.net/KeesCBakker/Qjr5q/.

source d'informationauteur Kees C. Bakker

  1. 23

    Si vous pouvez ajouter des css position: relative pour l'emballage/le défilement récipient puis c'est aussi simple que 

    document.getElementById('MrBlue').offsetTop

    et jsfiddle exemple http://jsfiddle.net/eU3pN/2/

  2. 3

    vous pouvez utiliser jQuery position

    $(document).ready(function() {
    alert($("#MrBlue").position().top);
});

    voir ce jsfiddle

    Mise à jour: Récipient doit avoir position:relative; sinon il l'habitude de travailler

    voir cette mise à jour jsfiddle

  3. 1

    De Jquery .position()

    L' .position() méthode nous permet de
    récupérer la position courante d'un
    élément par rapport à l'offset parent.
    Cela contraste avec la .offset(), qui
    récupère la position actuelle
    par rapport au document. Lorsque
    le positionnement d'un élément nouveau à côté de l'autre
    l'un et dans le même contenant des DOM
    de l'élément, .position() est le plus
    utile.

    Retourne un objet contenant les
    les propriétés top et left.

    http://jqapi.com/#p=position