javascript - 如何检测div是否超出页面边界？

Question

当您将鼠标悬停在链接上时，我正在使用一些 jQuery 来显示 div 弹出窗口。但是，当链接距离浏览器窗口右侧太近并且弹出窗口的内容不可见时，就会出现问题。

我在这里用相同的 jQuery 代码制作了一个示例:

http://codepen.io/anon/pen/GggLrw

我相信一个if语句可以解决问题，一些伪代码:

if(element is out of boundaries){
    moveleft=-400;
}

我只需要将 div 向左移动，超出边界到底部不会有问题，带有悬停触发器的链接不会在页面中那么低

Answer 1

尝试使用这个JS代码:

jQuery(function() {
  var moveLeft = 20;
  var moveDown = 10;

  jQuery('.box').hover(function(e) {

   if (e.pageX+jQuery('div.hidden').width() > jQuery(document).width()) {
      moveLeft = -20 - jQuery('div.hidden').width();
   }
   else
   {
       moveLeft = 20;
   }

    jQuery('div.hidden').show();
  }, function() {
    jQuery('div.hidden').hide();
  });

  jQuery('.box').mousemove(function(e) {
    jQuery("div.hidden").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });

});

http://codepen.io/anon/pen/XJJQRM