JQuery :: DIV Scrolls On Bottom Of Page On Changing Resolution

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 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 [URL].

The JS code I'm using is below.
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});