JS/JQ Fix for Son of Suckerfish extending below fold?

Question

I am creating a dropdown (well, actually it popups out to the right) navigation menu using "Son of Suckerfish."

Some of the sub menus are quite long and fall below the fold. Is there a way (using JavaScript/jQuery) to ensure that the menus are always above the fold (I'm quite happy if ones that are too big to fit in the viewport just butt up to the top)?

Answer 1

In the end, I couldn't find an answer, so made a solution myself.

The following is the code I used (requires jQuery):

var winHeight = $(window).height();
$navULs = $('#nav ul');
$navULs.find('ul').each(function(i,v) {
    $this = $(v);
    var ulHeight = $this.height();
    var parentHeight = $this.closest('li').height();
    var parentTop = $this.offset().top;
    var parentBottom = parentTop + parentHeight;
    if ((winHeight - parentTop) < ulHeight) {
        if (parentBottom < ulHeight) {
            $this.css({
                'margin-top': '0px',  // remove margin-top (added by suckerfish css) as it screws up the calculations
                'top': '-' + (parentTop) + 'px'  // move the menu up by the amount of px available above the parent's top
            });
        } else {
            $this.css('bottom', '0px');  // v basic, if sub menu will drop too much shove it up (css does the heavy lifting here)
        }
    }
});

I have tried to explain it in this blog post.