How to make sticky transition navigation less jittery?

On this dev site, I have a panel (blue background) below that scrolls as the user scrolls. When he gets to the top, the main nav (white background) moves up and off the page, and the blue bar sticks. It works, but it is very "nimble" if you scroll slowly. Any ideas how to make this smooth? Here's the jQuery that is causing this ...

<!-- to make sub menu stick to top-->
<script type="text/javascript">
    jQuery(function($) {
        var docked = false;
        var menu = $('.sticky_cta');
        var mainmenu = $('#t3-mainnav');
        var init = menu.offset().top;

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