Why won't sticky javascript work in Firefox / IE?

Question

I have a sticky green bar on [this site] [1]. When you go to Chrome, the panel moves up and sticks to the top of the page and remains fixed as you continue to scroll. But I just noticed that this does not work in Firefox or IE. Used javascript below. Does anyone have any idea why it only works in Chrome? (does not work on mobile devices, FYI)

// to make sub nav stick to top
jQuery(function($) {
    var docked = false;
    var menu = $('.sticky_cta');
    var init = menu.offset().top;

    $(window).scroll(function() {       
        if (!docked && (menu.offset().top - $("body").scrollTop() < 50)) {
            menu.css({
                position : "fixed",
                top: 0,
            });
            docked = true;
        } 
        else if (docked && $("body").scrollTop() <= init) {
            menu.css({
                position: "relative",
            });
            docked = false;
        }
    });
});

[1]:

Answer 1

Try using waypoints to make sure your bar is on top in all browsers, you will find it very easy to use, and also has a shortcut for sticky items.

:

menu.waypoint({
    handler: function (direction) {
        if (direction == 'down') {
            menu.css({
                position: "fixed",
                top: 0,
            });
        } else if (direction == 'up') {
            menu.css({
                position: "relative",
            });
        }
    },
    offset: //Whatever offset you need
});

:

http://imakewebthings.com/waypoints/

:

http://imakewebthings.com/waypoints/shortcuts/sticky-elements/

Answer 2

:

$("body").scrollTop document.documentElement.scrollTop

$("body").scrollTop , , FF 0