网页导航条定位

Posted 2022-02-03 littleboyck

*
                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>