position to mouse co ordinates after scrolling body

Question

If i am positioning a child div in accordance with the mouse co-ordinates inside a parent div, without scrolling the body, the child is being positioned properly. Now if a scroll the body such that the parent div is just visible, and now click on the parent, to position the child, the child is not being positioned. please suggest a way such that i will be able to position the child even after scrolling the body. Please find the same case in this Fiddle.Thanks in advance

Answer 1

Thanks all. My problem got solved with e.pageY See the following working Fiddle

Answer 2

As seen in the other answer, you can add the scroll offset when defining the top:

$('.b').css('top',e.clientY + document.body.scrollTop);

Your fiddle updated.

Answer 3

This works:

e.clientY = position Y of cursor on window

$('.a').offset().top = the position in document body of the top of .a area (if you need to change margin-top of .a, you better subtract this value).

$(window).scrollTop() = the distance you scrolled

$(document).ready(function(){
    $('.a').on('click',function(e){
        var positionClick =  e.clientY - $('.a').offset().top + $(window).scrollTop();
        $('.b').css('top',positionClick);
    });
});

Demo:

http://jsfiddle.net/8N63U/1/