使用 jQuery 根据元素在窗口中的位置定位弹出菜单

Question

我相信这个问题可能已经被问过，但我找不到正确的解决方案。

我需要在鼠标悬停在图标上显示一个菜单，该图标可以放置在页面上的任何位置。示例代码如下：（ http://jsfiddle.net/Qfjdk/2/）这显示了弹出窗口，但是如果我将代码从

#nav {
    margin:0; 
    padding:0; 
    list-style:none;
    float: left;
}   

自

#nav {
    margin:0; 
    padding:300px; 
    list-style:none;
    float: right;
}  

可以看出，菜单的位置始终在下方居中。我想根据图标的显示位置更改菜单的位置。

如果图标元素右对齐，我想将菜单定位为从图标的右边缘开始。如果图标元素朝向显示页面的左下角，我希望菜单左下角与元素左上角对齐等。

我不是在寻找算法，而是在寻找设置参数的正确方法。感谢您的帮助

Answer 1

我将首先定义要支持的替代方案数量（例如，4：右上，右下，左上或左下按钮），并使用这些不同的选项（.pos1，.pos2，.pos3，.pos4）创建一组类。

然后我会使用 JS 或 jQuery 来计算图标相对于窗口的偏移量。根据该结果，我会从您之前创建的弹出窗口中为弹出窗口提供正确的类。您可以在加载和窗口大小调整时执行此操作。例如，计算向右的距离并应用 css 更改（您可以应用一个类，但这只是为了展示它是如何工作的）：

var callback = function () {
// when hover on an element, calculate offset to right
        $('.yourElement').mouseover(function(){ 
            var currentElement = $(this);
            var distanceRight = $(window).width() - ($(currentElement).offset().left + $(currentElement).width());
            // If the distance is less than 50, then do...          
            if (distanceRight < 50) {
                $('.yourPopup').css("left","-200px");
            }
            else {}
        });
    };
    $(document).ready(callback);
    $(window).resize(callback);