javascript - 如果菜单溢出视口，如何获得通知

Question

当用户光标位于表格行上时，我将显示一个菜单，其中包含该特定行的扩展信息。问题是当用户向下滚动到最后几行时，我的菜单会溢出视口或窗口。

当菜单在视口/窗口底部的 50px 内时，有没有办法得到通知？

见快照

Answer 1

是的，您需要从计算两件事开始：

1. 视口底部相对于文档的当前位置
2. 菜单底部相对于文档的当前位置

获得这两个值后，您可以比较这两个值以确定菜单底部是否在视口之外。如果 #2 的值大于 #1 的值，那么您的菜单位于视口之外。

下面是一些使用 jQuery 的示例代码，供您参考。

var $window = $(window),
    $flyoutMenu = $('#flyout-menu'),
    $viewportBottom = $window.scrollTop() + $window.height(), // value #1
    $flyoutMenuBottom = $flyoutMenu.offset().top + $flyoutMenu.height(); // value #2

if (flyoutMenuBottom > $viewportBottom) {
    alert('Menu is outside of viewport');
}

编辑：更多信息

您可能希望将此代码包装在一个函数中，该函数在您第一次打开弹出菜单时以及每次窗口触发滚动事件时再次调用。