动态调整的jQuery UI.position（）

我目前正试图在鼠标悬停时在给定菜单项的右边弹出一个窗口。我使用了jQueryUI的.position（）属性来实现这一点，它在静态元素上运行良好。然而，我将弹出窗口绑定到一个可滚动的菜单上，我希望弹出窗口继续显示在菜单项的右侧，即使在我滚动一点之后。不幸的是，当主机元素通过滚动移动时，弹出窗口的位置变得非常不稳定。如何动态使用.position（）确保弹出窗口始终位于菜单项的右侧？有没有更好的方法动态地将一个元素的位置绑定到另一个元素？下面是我的代码

<div id="menu" style="overflow-y: scroll; ...">
    <p id="menu-item-1"></p>
    ...
</div>

<div id="popup-container" style="display: none; ...">...</div>

<script>
    $("#menu-item-1").hover(function(){
        $("#popup-container").position({
            my: "left top",
            at: "left+160 top",
            of: $("#menu-item-1")
        });
        $("#popup-container").toggle();
    }); 
</script>

...
...
$（“#菜单项-1”）。悬停（函数（）{
$（“#弹出式容器”）。位置({
我的：“左上”，
在：“左+160顶部”，
共：$（“#菜单项-1”）
});
$（“#弹出式容器”）.toggle（）；
}); 

别客气。我想出来了。position（）无法定位隐藏元素。因此，如果我将.toggle（）对象放在解决问题的.position（）对象之上