更改div的位置

Question

看看这个小提琴 （告诉一切）。 我只是想将.app定位到a位置。 我已经定义了.app应该出现在哪里的超链接，并为每个超链接指定了id ，但是这些ID在我的网站中不会出现。 由于我必须找到超链接的位置并相应地定位.app因此它不会使body显示scrollbar如在这种情况下....任何人都可以相应地定位.app吗？

$('a').mouseover(function(){
    $('.app').css({
        top :  $(this).position().top + $(this).height() + 5,
        left : $(this).position().left + $(this).width()/2
    }).show();
}).mouseout(function(){
     $('.app').hide();
}); 

Answer 1

您可以找到解决方案。 它不是完美的，它并没有涵盖所有情况，而只是出现“出现在顶部”的问题，但其余部分很容易修复..

$('a').mouseover(function(){               

    $('.app').css({
        top : ((  $(this).position().top + $('.app').height() + 5)>$(window).height())?   
               $(this).position().top - $(this).height() -$('.app').height() - 5:
               $(this).position().top + $(this).height() + 5,
        left : $(this).position().left + $(this).width()/2
    }).show();
}).mouseout(function(){
    $('.app').hide();
});

Answer 2

$('a').mouseover(function () {

    $('.app').css({
        top: (($(this).position().top + $('.app').height() + 5) > $(window).height()) ? $(this).position().top - $(this).height() - $('.app').height() - 5 : $(this).position().top + $(this).height() + 5,
        left: (($(this).position().left + $(this).width() / 2 + $('.app').width()) > $(window).height()) ? $(this).position().left - $(this).width()/2 - $('.app').width()/2 : $(this).position().left + $(this).width()/2
    }).show();
}).mouseout(function () {
    $('.app').hide();
});

这段代码完成了工作！

http://jsfiddle.net/DT7Us/2/ -DEMO