jquery 页面滚动tab自动定位，tab与内容对应

直接上源码，基于jquery写的，可以直接跑起来。
原理是先计算出页面元素对应的高度。页面滚动时计算tab对应的高端区间，设置具体的tab。欢迎指正
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
            @charset "utf-8";
            ::-webkit-scrollbar {
                width: 0px;
            }
            body, ul, li, ol, div, p, nav {
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                /* Firefox */
                -webkit-box-sizing: border-box;
                /* Safari */
                font-family:"微软雅黑", "Arial";
            }
            html {
                height: 100%;
            }
            body {
                color: #5d5d5d;
                background-color: #fff;
                max-width: 800px;
                width: 100%;
                height: 100%;
                margin: 0 auto;
            }
            a {
                text-decoration: none;
                color: #5d5d5d;
            }
            input, button, select, textarea {
                outline: none;
            }
            #nav {
                clear: both;
                width: 100%;
                max-width: 800px;
                height: 36px;
                padding: 5px 7px;
                border-bottom: 1px solid #ECECEC;
                background: #fff;
            }
            #nav.fix {
                position: fixed;
                z-index: 999;
                top: 0;
            }
            #nav nav {
                width: 100%;
                overflow: hidden;
            }
            #nav nav ul {
                white-space: nowrap;
                overflow-x: scroll;
                font-size: 0;
            }
            #nav nav ul li {
                color: #7E7E7E;
                display: inline-block;
                font-size: 13px;
                line-height: 18px;
                background-color: #F6F6F6;
                padding: 5px 10px;
                margin-right: 8px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
            }
            #nav nav ul li.cur {
                background-color: #F4333B;
            }
            #nav nav ul li.cur a {
                color: #fff;
            }
            .main {
                margin-top: 36px;
            }
            .conts {
                height: 800px;
                background-color: #610004;
            }
            .conts > p {
                color: #F4333B;
                height: 40px;
                line-height: 40px;
                width: 100%;
                background-color: #007AFF;
                display: block;
                text-align: center;
            }
            .contsx {
                height: 500px;
                background-color: #C9C9C9;
            }
            .contsx > p {
                color: #E4E4E4;
                height: 40px;
                line-height: 40px;
                width: 100%;
                background-color: blue;
                display: block;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="nav" class="fix">
            <nav>
                <ul class="J_navtab">
                    <li class="tab cur"><a href="#111" data-href="111">这是第一个</a></li>
                    <li class="tab"><a href="#222" data-href="222">这是第2个</a></li>
                    <li class="tab"><a href="#333" data-href="333">这是第3个</a></li>
                    <li class="tab"><a href="#444" data-href="444">这是第4个</a></li>
                    <li class="tab"><a href="#555" data-href="555">这是第5个</a></li>
                    <li class="tab"><a href="#666" data-href="666">这是第6个</a></li>
                </ul>
            </nav>
        </div>
        <div class="main">
            <div class="conts" data-nav="111">
                <p>111</p>
            </div>
            <div class="conts" data-nav="222">
                <p>22</p>
            </div>
            <div class="conts" data-nav="333">
                <p>33</p>
            </div>
            <div class="conts" data-nav="444">
                <p>4444</p>
            </div>
            <div class="conts" data-nav="555">
                <p>555555</p>
            </div>
            <div class="conts" data-nav="666">
                <p>666666</p>
            </div>
        </div>

        <script type="text/javascript">
            var $navList = $('.J_navtab .tab'),
                $conts = $('.conts'),
                curNav = 0,
                navHeight = 36,
                clientW = document.body.clientWidth;
            var contTopList = [],posiLeftList=[];
            
            $conts.each(function(i) {
                contTopList.push($(this).position().top - navHeight);
            });
            $navList.each(function(){
                posiLeftList.push($(this).position().left);
            });
            
            console.log("contTopList---,", contTopList);
            console.log("posiLeftList---,", posiLeftList);
            
            var len = contTopList.length;
            
            $(document).on('scroll', function(e) {
                var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                for (var i = 0; i < len; i++) {
                    if (_scrollTop < contTopList[i]) {
                        changeNav(0);
                        break;
                    } else if (_scrollTop >= contTopList[len - 1]) {
                        changeNav(len - 1);
                        break;
                    } else if (_scrollTop > contTopList[i - 1] && _scrollTop < contTopList[i + 1]) {
                        changeNav(i);
                        break;
                    }
                }
            });
            /**
             * 切换tab
             * @param {Object} index
             */
            function changeNav(index) {
                console.log("当前第 ", index," 个");
                if (index != curNav) {
                    $navList.eq(index).addClass('cur').siblings().removeClass('cur');
                    //tab对应滚动到最中间
                    $('.J_navtab').scrollLeft(posiLeftList[index] - (clientW / 2) + ($navList.eq(index).outerWidth() / 2));
                }
                curNav = index;
            }
            
            $navList.on('touchend',function(e){
                var navHref = $(this).find('a').attr('data-href');
                $('html,body').scrollTop($(".conts[data-nav='"+navHref+"']").position().top - navHeight);
//                $('html,body').scrollTop(contTopList[$(this).index()]);
            });
        </script>

    </body>

</html>