jQuery：如何检查元素是否超过浏览器窗口的大小，以及如何重新定位它答案

【问题标题】：jQuery: How to check if an element exceeds the browser window's size, and how to reposition itjQuery：如何检查元素是否超过浏览器窗口的大小，以及如何重新定位它
【发布时间】：2011-09-18 05:33:58
【问题描述】：

我有这个代码：

var pos = $(this).offset();
var width = $(this).width();

userPreviewCon.css({
     left: (pos.left + 30) + 'px',
     top: (pos.top + 15) + 'px'
}).fadeIn();

...用于相对于鼠标指向的元素定位弹出窗口。

但是当一个元素靠近窗口的边框时，一些工具提示是不可见的，因为它的一部分超出了窗口大小。问题是：如何重新定位工具提示以不再超出窗口的边框？

【问题讨论】：

标签： jquery popup window positioning

【解决方案1】：

要获得窗口的宽度，您可以这样做

$(window).width();

然后检查一下这是否离你想的太远了（从你发布的内容来看，做这个评估

(pos.left + 30) > $(window).width();

最后，如果这个评估是真的，你可以做以下事情

pos.left -= pos.left + 30 - $(window).width();

这应该使您的工具提示框弹出，使其右边缘位于窗口的右边缘。

【讨论】：

【解决方案2】：

使用Math.max() 和Math.min() 选择所提供变量的较高/较低值，如下所示：

var pos = $(this).offset();
        var width = $(this).width();
        userPreviewCon.css({
            left: Math.min((Math.max(0,pos.left + 30)+$(this).width(),$(window).width()) + 'px',
            top: Math.min(Math.max(0,pos.top + 15)+$(this).height(),$(window).height()) + 'px'
        }).fadeIn();

因此，如果计算的值为> 0，则0 是较高的值，如果它试图超出左侧的边界，则将被选中。同样，如果x+width>window.width()，右侧将使用较低的值，即window.width()。

【讨论】：