Floating menu does not work in Chrome?

Question

I am trying to build a floating menu that follows the user when he scrolls the screen:

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

This works perfectly fine in Firefox but does not work in Chrome. Is there anything I am missing?

Answer 1

Rather than trying to parse the menu's top position from CSS, you can use the position() and offset() methods:

menuYloc = $("#floatMenu").offset().top;
$(window).scroll(function() {
    var offset = menuYloc+$(document).scrollTop()+"px";  
    $("#floatMenu").animate({top:offset},{duration:500,queue:false});  
});

position() is relative to the element's offset parent (i.e. whatever #floatMenu is contained in), whereas offset() is relative to the document.