根据鼠标指针更改div的位置

Question

I am trying to position a div based on mouse position, I managed to get it to work 50%. The problem is that DIV always seems to be much lower than the actual mouse position, I try to minus the offset, no luck.

Basically what I want is to float the div(the NEXT link in jsfiddle) vertically, but the DIV should not be able to go outside of the container it is in(the div that has the image in the jsfiddle)

here is the jsfiddle: http://jsfiddle.net/LYmVH/7/

below is the JS, which is also in the jsfiddle:

$('.post-single-content').mousemove(function(e){
    var height=e.pageY,
        height1 =$('.content-top').height(); 
    $('.btnNext').css({top: (e.pageY + 50) + "px"});
});

Answer 1

You need measure against the top of the parent element since it's absolutely positioned in it.

Try changing your JS to:

$('.post-single-content').mousemove(function(e){
    var top = (e.pageY - $(this).offset().top) + 'px';
    $('.btnNext').css({ top: top });
});

---

Upon reading some comments lemme update, by making use some basic math and create "collision". Somthing like:

$('.post-single-content').mousemove(function(e){
    var y = e.pageY,  //  mouse y axis position
        tHeight = $(this).height(),  //  container height
        bHeight = $('.btnNext').height(),  //  button height
        oTop = $(this).offset().top,  //  offset top position of container
        abBot = tHeight - $('.btnNext').height(),  //  absolute top of button when at bottom
        bHalf = bHeight / 2,  //  half button height
        top = y - oTop - bHalf,  //  initial top pos of button
        bot = y - oTop + bHalf;  //  bottom of button while moving

    if (top < 0) top = 0;  //  ensure button doesn't go to far north
    else if (bot > tHeight) top = abBot;  //  ensure it cant go past south

    $('.btnNext').css({ top: top });  //  'px' not neccesary
});

jsFiddle