移动端滚动菜单栏，点击某一项，居中显示（有下拉按钮）

先上一张效果图

页面结构：

<header>
    <a class="nav active1">
        vue
    </a>
    <a class="nav">
        react
    </a>
    <a class="nav">
        小程序
    </a>
    <a class="nav">
        koa
    </a>
    <a class="nav">
        php
    </a>
    <a class="nav">
        mysql
    </a>
    <a class="nav">
        mongo
    </a>
    <a class="nav">
        react-native
    </a>
    <a class="nav">
        flutter
    </a>
</header>

主要js：

  var $navs = $('.nav'),          // 导航
        $sections = $('.con'),       // 模块
        $window = $(window),
        navLength = $navs.length - 1;

    $window.on('scroll', function() {
        var scrollTop = $window.scrollTop(),
            len = navLength;

        for (; len > -1; len--) {
            var that = $sections.eq(len);
            if (scrollTop >= that.offset().top) {
                $navs.removeClass('active').eq(len).addClass('active');
                break;
            }
        }
    });
    $(".drop").on("click",function(){
        $(".nav").toggleClass("drop_down");
        $(".drop").toggleClass("pull");
    })
    //    点击导航栏字体颜色变化
    $(function(){
        $(".nav").on("click",function(ev){
            $(".nav").removeClass("drop_down");
            $(".drop").removeClass("pull")
            var moveX = $(this).position().left+$(this).parent().scrollLeft();
            var pageX = document.documentElement.clientWidth;
            var blockWidth = $(this).width();
            console.log(moveX)
            console.log(pageX);
            console.log(blockWidth);
            var left = moveX-(pageX/2)+(blockWidth/2);
            console.log(left);
            $(this).addClass("active").siblings().removeClass("active");
            $("header").scrollLeft(left);
        })
    });

完整代码：github地址