网页导航条定位

*{
                margin: 0;
                padding: 0;
            }
            .menu{
                width: 200px;
                height: 400px;
                position: absolute;
                top:0;
                margin: 7px;
                border-radius: 3px;
                background: #f1f1f1;
                overflow: hidden;
                transition: all .6s linear;
            }
            .active{
                font-weight: 600;
            }
            .menu-scroll{
                width: 220px;
                height: 600px;
                overflow-y: auto;
            }
            .hide-menu-scroll{
                width: 200px;
            }
            .menu-scroll ul{
                list-style-type: none;
            }
            .menu-scroll ul li{
                font-size: 14px;
                padding: 10px;
            }
            a{
                color: seagreen;
            }
            a{
                text-decoration: none;
            }
            .view{
                transition: all; .6s linear;
            }
            .article{
                border: 1px solid saddlebrown;
                margin: 7px;
                margin-left: 214px;
                border-radius: 3px;
                box-shadow: ;
                padding: 15px;
                box-sizing: border-box;
            }

<div class="menu">
            <div class="menu-scroll">
                <ul class="hide-menu-scroll">
                    <li><a href="#menu1">菜单1</a></li>
                    <li><a href="#menu2">菜单2</a></li>
                    <li><a href="#menu3">菜单3</a></li>
                    <li><a href="#menu4">菜单4</a></li>
                    <li><a href="#menu5">菜单5</a></li>
                    <li><a href="#menu6">菜单6</a></li>
                    <li><a href="#menu7">菜单7</a></li>
                    <li><a href="#menu8">菜单8</a></li>
                    <li><a href="#menu9">菜单9</a></li>
                    <li><a href="#menu10">菜单10</a></li>
                    <li><a href="#menu11">菜单11</a></li>
                    <li><a href="#menu12">菜单12</a></li>
                    <li><a href="#menu13">菜单13</a></li>
                    <li><a href="#menu14">菜单14</a></li>
                    <li><a href="#menu15">菜单15</a></li>
                    <li><a href="#menu16">菜单16</a></li>
                </ul>
            </div>
        </div>
        <div class="view">
            <div>
                <div id="menu1" class="article" style="height: 300px;">
                    菜单1的内容
                </div>
                
                <div id="menu2" class="article" style="height: 350px;">
                    菜单2的内容
                </div>
                
                <div id="menu3" class="article" style="height: 400px;">
                    菜单3的内容
                </div>
                
                <div id="menu4" class="article" style="height: 200px;">
                    菜单4的内容
                </div>
                
                <div id="menu5" class="article" style="height: 400px;">
                    菜单5的内容
                </div>
                
                <div id="menu6" class="article" style="height: 250px;">
                    菜单6的内容
                </div>
                
                <div id="menu7" class="article" style="height: 500px;">
                    菜单7的内容
                </div>
                
                <div id="menu8" class="article" style="height: 400px;">
                    菜单8的内容
                </div>
                
                <div id="menu9" class="article" style="height: 300px;">
                    菜单9的内容
                </div>
                
                <div id="menu10" class="article" style="height: 300px;">
                    菜单10的内容
                </div>
            </div>
        </div>

<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
        <script>
            
            //$(window).scrolltop()相同
            var getwinscrolltop = function(){
                return document.documentelement.scrolltop||window.pageyoffset || document.body.scrolltop;
            }
            
            $(function(){
                //定位菜单栏
                $(".menu").css('top',$(window).scrolltop()+'px');
                $(window).scroll(function(){
                    //滚动时，也定位
                    $(".menu").css('top',$(window).scrolltop()+'px');
                    //设置当前的菜单栏
                    $(".article").each(function(i){
                        if($(window).scrolltop() >= ($(this).offset().top-7) ){
                            $('.menu').find('li').eq(i).addclass('active').siblings().removeclass('active');
                        }else{
                            return false;
                        }
                    });
                });
                
                
                //滚动到指定菜单栏
                $('.menu').find('li').click(function(e){
                    var e = e || window.event
                        ,$this = $(this);
                    event.preventdefault()
                    var selector = $this.children('a')[0].hash;
                    $this.addclass('active').siblings().removeclass('active');
                    try{
                        $('html,body').animate({scrolltop:($(selector).offset().top-7)+'px'},400)
                    }catch{
                        alert("菜单内容不存在");
                    }
                    
                });
            });
        </script>