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

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

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

Answer 2

两个导航仪一起滚动？