如果菜单溢出视口，如何收到通知

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

编辑：更多信息

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