$.position returning different values for the same selector inside an scrolling div

Question

I am using the $.position over the same selector and I am getting different results for the top value.

The problem might be in getting the position of the selector inside the scrolling div. That's why I am using $.position instead of $.offset, but it seems I am doing something wrong.

You can try it clicking multiple times on the the text "Get Position" at my fiddle: http://jsfiddle.net/FgftM/1/

Once the div has scrolled to look for the selector, clicking on the "Get Position" again shouldn't do anything because I am already on the selector position.

The resulting position values showed at the bottom.

To clarify the structure of the page, here's an sketch:

Original fiddle: http://jsfiddle.net/BtZQE/16/

Answer 1

I believe what you want to do is set position: relative on #content. That way the position is calculated in relation to the container instead of the overall page.

http://jsfiddle.net/FgftM/6/

EDIT: After some clarification, you still need the position: relative but you also need to add in the current scrollTop value:

http://jsfiddle.net/FgftM/8/

var top = dest.top + $('#content').scrollTop();