改变div的位置答案

【问题标题】：Changing the position of div改变div的位置
【发布时间】：2014-07-11 17:37:07
【问题描述】：

看看这个Fiddle（它说明了一切）。我只想根据a 位置定位.app。我已经在小提琴中定义了超链接 .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();
});

【问题讨论】：

试试这个jqueryui.com/position
不，这不是我想要的@AamirAfridi
检查任何 jQuery 工具提示插件的来源。
我想做这个纯粹的没有任何插件@AamirAfridi

标签： javascript jquery position css-position positioning

【解决方案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();
});

【讨论】：

【解决方案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

【讨论】：