实现固定导航栏

本文主要讲解如何将导航固定在屏幕上，以及切换到页面不同位置

（示例代码为引用他人的，非本人原创）

首先在html中设置好菜单选项及相对应的栏目：

<div id="loutinav">
    <ul>
        <li class="active"><span>享品质</span> </li>
        <li><span>服饰美妆</span> </li>
        <li><span>电脑数码</span> </li>
        <li><span>3C运动</span> </li>
        <li><span>爱吃</span> </li>
        <li><span>母婴居家</span> </li>
        <li><span>图书汽车</span> </li>
        <li><span>虚拟</span> </li>
        <li><span>还没逛够</span> </li>
        <li class="last">顶部</li>
    </ul>
</div>
<!--楼层内容开始-->
<div id="header">
    向下滚动鼠标查看效果
</div>
<div id="main">
    <div class="louti" style="background: #cc0033;">
        享品质
    </div>
    <div class="louti" style="background: #999933;">
        服饰美妆
    </div>
    <div class="louti" style="background: #ccff33;">
        电脑数码
    </div>
    <div class="louti" style="background: #006633;">
        3C运动
    </div>
    <div class="louti" style="background: #6666cc;">
        爱吃
    </div>
    <div class="louti" style="background: #ff6600;">
        母婴居家
    </div>
    <div class="louti" style="background: #ffff00;">
            图书汽车
    </div>
    <div class="louti" style="background: #3333ff;">
        虚拟
    </div>
    <div class="louti" style="background: #ff00cc;">
        还没逛够
    </div>
</div>
<div id="footer">
    网站底部
</div>

再设置css区分各个栏目：

    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-family: 'microsoft yahei';
    }

    #loutinav {
        width: 35px;
        position: fixed;
        top: 100px;
        left: 50px;
        border: 1px solid #ddd;
        display: none;

    }

    #loutinav ul li {
        width: 35px;
        height: 32px;
        border-bottom: 1px dotted #DDDDDD;
        list-style: none;
        font-size: 12px;
        text-align: center;
        position: relative;
        cursor: pointer;
        padding: 10px 0;
        background: #918888;
        color: #fff;
    }

    #loutinav ul li span {
        width: 35px;
        height: 32px;
        padding: 10px 0;
        position: absolute;
        top: 0;
        left: 0;
    }



    #loutinav ul li.last {
        background: #5e4a4a;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }

    #loutinav ul li.active span {
        background: #c00;
        color: #fff;
        display: block;
    }

    #loutinav ul li:hover span {
        background: #c00;
        color: #fff;
        display: block;
    }

    #header {
        width: 1000px;
        height: 1000px;
        background: #cc6633;
        margin: 0 auto;
         font-size: 50px;line-height: 1000px;text-align: center;
         color: #000;
    }

    #main {
        width: 1000px;
        background: #66ff66;
        margin: 0 auto;
    }

    #main .louti {
        height: 600px;
        width: 1000px;
        font-size: 50px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: 600px;
    }


    #footer {
        width: 1000px;
        height: 400px;
        background: red;
        margin: 0 auto;
        font-size: 50px;line-height: 400px;text-align: center;
         color: #000;
    }
    </style>

到此,我们已经将页面的布局、外观设计完毕,接下来就是让页面动起来。在这之前，需要了解几个关键css设置。

postion:fixed
该属性生成绝对定位的元素，相对于浏览器窗口进行定位。通过这个属性即可使导航栏固定在屏幕上，不随页面位置变化二变化。
.active
这个“.active”在css并未单独设置属性值，用于实现动态添加，当li中含.active类名时，开始使用li.active样式。

使用动态设计，就有必要用到JS，我在这里使用JQuery，具体如下：

    $(function(){
        //1.楼梯什么时候显示，800px scroll--->scrollTop
        $(window).on('scroll',function(){
            var $scroll=$(this).scrollTop();
            if($scroll>=800){
                $('#loutinav').show();
            }else{
                $('#loutinav').hide();
            }

            //4.拖动滚轮，对应的楼梯样式进行匹配
            $('.louti').each(function(){
                var $loutitop=$('.louti').eq($(this).index()).offset().top+400;/**/
                //console.log($loutitop);
                if($loutitop>$scroll){//楼层的top大于滚动条的距离
                    $('#loutinav li').removeClass('active');
                    $('#loutinav li').eq($(this).index()).addClass('active');
                    return false;//中断循环，阻止后面的li添加active
                }
            });
        });
        //2.获取每个楼梯的offset().top,点击楼梯让对应的内容模块移动到对应的位置  offset().left

        var $loutili=$('#loutinav li').not('.last');
        $loutili.on('click',function(){
            $(this).addClass('active').siblings('li').removeClass('active');
            var $loutitop=$('.louti').eq($(this).index()).offset().top;//li的位置的值与louti位置的值相同
            //获取每个楼梯的offsetTop值
            $('html,body').animate({//$('html,body')兼容问题body属于chrome
                scrollTop:$loutitop
            });
        });
        //3.回到顶部
        $('.last').on('click',function(){
            $('html,body').animate({//$('html,body')兼容问题body属于chrome
                scrollTop:0
            });
        });

    });

注意：
“offset（）.top+400”这一设定的“+400”纯属为了美观，至于具体“+”多少应你自己的样式设定而定，可用console.log（）边改边看效果。

此外，这个方法有一很大弊端，及当栏目的高度（“height”）相差很大时，显示效果会参差不齐，该方法只适用于栏目高度相差极小的页面设置。

猜你喜欢