如何使粘性导航过渡不那么跳跃？

Question

在这个dev site上我有一个向下滚动的栏（蓝色背景），当用户滚动时向上滚动。当它到达顶部时，主导航（白色背景）向上移动并离开页面，蓝色条和＃34;粘在＆＃34;上。它有效，但它非常＆＃34;跳跃＆＃34;如果你慢慢滚动。任何想法如何使这个顺利？这是实现它的jQuery ......

<!-- 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>