I have basically 2 div elements. The first is a scrolling container and the second one is an element that is placed in the container. I would like to find the y-position relative to the scrolling container. I wrapped all of it into a piece of example-code titled How to find Mr. Blue?
<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>
So I would like a JavaScript / jQuery statement that alerts the vertical-position of the Mr. Blue. div relative to the scrolling container.
Ps. If you would like to 'fiddle' with mr. Blue, check http://jsfiddle.net/KeesCBakker/Qjr5q/.
If you can add css position: relative to the wrapping/scrolling container then it's as simple as
document.getElementById('MrBlue').offsetTop
and jsfiddle example http://jsfiddle.net/eU3pN/2/
you can use jQuery position
$(document).ready(function() {
alert($("#MrBlue").position().top);
});
see this jsfiddle
Update: Container must have position:relative; otherwise it wont work
see this updated jsfiddle
Jquery's .position()
The .position() method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document. When positioning a new element near another one and within the same containing DOM element, .position() is the more useful.
Returns an object containing the properties top and left.