[jQuery] How do I stop my div from sliding?

[jpearson311]

Hi all.  JQuery noob here.  I'm building a site right now that has a
left column navigation and the navigation is nested inside a div,
which is nested inside a table cell (i.e., <td>).  I'm using JQuery to
make it so when the user scrolls down the page, the div slides down
with smoothly and always stays at the top of the page.  I have this
working just fine, but when I change resolutions (i.e., 1024x768), the
div scrolls over the bottom of the page, which is what I don't want.
How can I calculate in order for the div to know when it hast reached
the bottom of the table cell?  I tried using outerHeight to calculate
the height of the table cell and then subtracting the height of the
div from it, but I'm clearly doing it wrong because it's still not
working.  You can view the page I'm referring to at 
www.ts24.com/watersedge/overview.cfm.
The JS code I'm using is below.  If anyone has any pointers, I'd
really appreciate it.  Thanks!

Jesse

var name = "#scroller";
var menu_top_limit = 0;
var menu_bottom_limit = $('#holder > #scroller').outerHeight() - 560;
var menu_top_margin     = -15;
var menu_shift_duration = 500;
var menuYloc = null;
///////////////////////////////////
$(window).scroll(function()
{
        // Calculate the top offset, adding a limit
        offset = menuYloc + $(document).scrollTop() + menu_top_margin;

        // Limit the offset to 0 pixels...
        // This keeps the menu within it's containing TD boundaries
        if(offset < menu_top_limit){
                offset = menu_top_limit;

        // Give it the PX for pixels:
        offset += "px";
        }

        /*else if(offset > menu_bottom_limit){
                offset = menu_bottom_limit;

                offset += "px";
        }*/

        // Animate:
        $(name).animate({top:offset},
{duration:menu_shift_duration,queue:false});
});