Tengo básicamente 2 elementos div. El primero es un contenedor de desplazamiento y el segundo es un elemento que se coloca en el contenedor. Me gustaría encontrar la posición y en relación con el contenedor de desplazamiento. Envolví todo en un fragmento de código de ejemplo titulado ¿Cómo encontrar al Sr. Azul?
<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>Entonces, me gustaría una declaración de JavaScript / jQuery que alerte la posición vertical de Mr. Blue. div relativo al contenedor de desplazamiento.
PD. Si desea 'jugar' con el sr. Azul, consulte http://jsfiddle.net/KeesCBakker/Qjr5q/ .
Si puede agregar la position: relative con el contenedor de ajuste/desplazamiento, entonces es tan simple como
document.getElementById('MrBlue').offsetTopy jsfiddle ejemplo http://jsfiddle.net/eU3pN/2/
puedes usar la posición jQuery
$(document).ready(function() { alert($("#MrBlue").position().top); });ver este jsfiddle
Actualización: el contenedor debe tener una position:relative; de lo contrario no funcionará
ver este jsfiddle actualizado
Posición () de Jquery
El método .position() nos permite recuperar la posición actual de un elemento en relación con el padre desplazado. Compare esto con .offset(), que recupera la posición actual en relación con el documento. Al colocar un nuevo elemento cerca de otro y dentro del mismo elemento DOM que lo contiene, .position() es más útil.
Devuelve un objeto que contiene las propiedades top y left.