页面中两个导航切换，怎么避免切换中出现空隙？

Question

当向下或向上滚动时，菜单中间会出现短暂的空隙，怎么写才能避免这个空隙出现呢？

下面是我的方法，我感觉这个方法太笨重了，而且效果不好：

$(function(){
                $('body').scrollspy({target: '#productDetailsNav'});
                $(window).scroll(function() { 
                    //顶部黑色菜单的高度
                    var navHeight = $('.TopTools').height();
                    console.log('navHeight:' + navHeight);
                    //固定菜单在滚动时的相对高度
                        var targetTop = $(this).scrollTop(); 
                        //当前固定菜单
                        var curNav = $('.nav-warp');
                        //common.isMobile() 是判断在手机端时的显示
                        //nav-mobile-fixed 手机端时显示的位置
                        //nav-warp-fixed PC端时显示的位置
                        if(common.isMobile() && targetTop > 0){
                            $('.nav-pills').show(200);
                            curNav.addClass('nav-mobile-fixed');
                        } else if(common.isMobile() && targetTop < 50){
                            $('.nav-pills').hide(200);
                            curNav.addClass('nav-mobile-fixed').removeClass('nav-warp-fixed');
                        } else if(common.isMobile() || targetTop > 30){
                            curNav.removeClass('nav-mobile-fixed').addClass('nav-warp-fixed');
                        } else if(common.isMobile() || targetTop < 30){
                            curNav.removeClass('nav-warp-fixed').addClass('nav-mobile-fixed');
                        }
                  });
            })    

烦懂的师傅们指点，谢谢！
在向下滚动时，怎么让固定的菜单与黑色菜单一起滚动呢，当黑色滚动看不见时，固定菜单固定在顶部？

Answer 1

思路可以参考一下这个实现 和 代码

Answer 2

两个导航仪一起滚动？