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

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

两个导航仪一起滚动？