JQuery/CSS - Floating Column Menu

I have a floating column menu on my page, it works and looks great but I need to modify it a little but can't work out how.

The script is:

var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
    menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
    $(window).scroll(function () { 
        offset = menuYloc+$(document).scrollTop()+"px";
        $(name).animate({top:offset},{duration:1000,queue:false});
    });
});

The CSS for the element '#floatMenu' is:

#floatMenu { position:relative; width:285px; top:0px; left:0px; }

Currently, as I scroll down the page, 1 second later the menu chases me down the page but stops when it reaches, in pixels, the distance the element was from the top of the window originally. For exa开发者_开发知识库mple, on page load, the floating element is say, 308px away from the top. When I start to scroll down, the floating element stays 308px from the top at all times.

Is it possible to modify this script, so the floating menu is always 20px from the top of my window when I scroll down?

See http://jsfiddle.net/mblase75/uEkSq/4/

I added some code that computes whether floatMenu's default position is larger than the scrollTop.

var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function() {
    menuYloc = $("#floatMenu").offset().top;
    $(window).scroll(function() {
        offset = Math.max(menuYloc,$(document).scrollTop()+20);
        $(name).animate({
            top: offset
        }, {
            duration: 1000,
            queue: false
        });
    });
});