更改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