根據窗口中的元素位置使用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;
}  

可以看出，菜單的位置始終位於下方居中。 我想根據圖標的顯示位置更改菜單的位置。

如果icon元素右對齊，則我想將菜單定位為從icon的右邊緣開始。 如果圖標元素朝向顯示頁面的左下角，我希望菜單的左下角與元素的左上角對齊等等。

我不是在尋找算法，而是在尋找設置參數的正確方法。

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);