Q:

How to get notified if a menu is overflowing the viewport

As the users cursor is over a table row I'm showing a menu with extended information of that specific row. The problem is when the user scrolls down to the last couple of rows my menu overflows the viewport or window.
Is there a way to get notified when the menu is with-in 50px of the bottom of the viewport / window?
See snap shot

A:

Yes, you'll need  start by calculating two things: 

The current position of the bottom of the viewport relative to the document
The current position of the bottom of the menu relative to the document

Once you have these two values, you can compare the two values to determine if the bottom of the menu is outside of the viewport. If the value for #2 is greater than the value of #1, then you're menu is outside of the viewport.
Here's some example code using jQuery for reference to get your started.
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');
}

EDIT: More Information
You'll want to probably wrap this code in a function that get's called when you first open the flyout menu and again every time the window fires a scroll event.

