导航滑动特效

思路很简单：就是跟着滚动条走，判断滚动条在不同的位置，让导航对应位置显示高亮
2.点击对应的导航部分，跳转到对应的导航内容部分
结构部分

<div id="box">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
            </ul>
        </div>
        <div class="content">
            <section class="a1">n1</section>
            <section class="a1">n2</section>
            <section class="a1">n3</section>
            <section class="a1">n4</section>
            <section class="a1">n5</section>
            <section class="a1">n6</section>
            <section class="a1">n7</section>            
        </div>

很简单不多叙述
css样式

<style type="text/css">
            *{margin: 0;padding: 0;}
            #box{overflow: hidden;}
            #box ul{width: 300px;height: 40px;float: right;list-style: none;transform: rotateZ(90deg);position: fixed;top: 50%;left: 5%;}
            #box ul li{width: 20px;height: 20px;border: aqua 3px solid;border-radius: 50%;float: left;color: #333;text-align: center; line-height: 20px;margin-right: 3px;}
            .content section{width: 80%;margin: auto;border: 1px solid #000;height: 700px;margin-bottom: 20px;}
            .active{background-color: red}
        </style>

也很简单，不叙述
jq部分

<script type="text/javascript">
            $("#box ul li ").each(function(){
                $("#box ul li ").click(function(){
                $current=$(".content section").eq($(this).index()).offset().top;
//              console.log($current);
                $("html,body").animate({
                    "scrollTop":$current
                },300);
                $("#box ul li ").eq($(this).index()).addClass("active").siblings().removeClass("active");
            })
            })


            $(window).scroll(function(){
                $_top=$(window).scrollTop();
//              console.log($_top);
                if ($_top>=0&&$_top<386) $("#box ul li ").eq(0).addClass("active").siblings().removeClass("active");
                if ($_top>=386&&$_top<1100) $("#box ul li ").eq(1).addClass("active").siblings().removeClass("active");
                if ($_top>=1100&&$_top<1850)$("#box ul li ").eq(2).addClass("active").siblings().removeClass("active");
                if ($_top>=1850&&$_top<2560)$("#box ul li ").eq(3).addClass("active").siblings().removeClass("active");
                if ($_top>=2560&&$_top<3288)$("#box ul li ").eq(4).addClass("active").siblings().removeClass("active");
                if ($_top>=3288&&$_top<4000)$("#box ul li ").eq(5).addClass("active").siblings().removeClass("active");
                if($_top>=4000){$("#box ul li ").eq(6).addClass("active").siblings().removeClass("active");}
            })
        </script>

数值的选取看console的结果自己设定。