There are two navigation switches on the page, how to avoid gaps in the switch?

clipboard.png

clipboard.png

clipboard.png

here is my method, which I think is too bulky and doesn"t work well:

$(function(){
                $("body").scrollspy({target: "-sharpproductDetailsNav"});
                $(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");
                        }
                  });
            })    

I would like to ask the teachers who understand me for their advice. thank you!
when scrolling down, how do you make the fixed menu scroll with the black menu, and when the black scroll is out of sight, the fixed menu is fixed at the top?

Mar.05,2021

idea can refer to this implementation and code


two navigators scroll together?

Menu